I am working on a project that involves creating a grid with 4 columns and 4 rows. The challenge I am facing is making the 4th column transition into a 5th row on small displays, instead of being displayed as a column on medium to large screens. This project is aimed at enhancing my understanding of the Bootstrap grid layout. Essentially, I am building a responsive calculator for practice purposes. While I believe I can achieve this using raw CSS, I wanted to explore if Bootstrap offers any utilities that could simplify the process.
Here is an example of the layout:
Large format:
https://i.sstatic.net/WhFKS.png
Small format:
https://i.sstatic.net/pTJrq.png
I have started working on the markup structure. There is additional associated CSS, but it may not be crucial for the purpose of this example. At the moment, my code looks like this:
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">1</button>
<button type="button" class="btn-lg btn-outline-dark">2</button>
<button type="button" class="btn-lg btn-outline-dark">3</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">4</button>
<button type="button" class="btn-lg btn-outline-dark">5</button>
<button type="button" class="btn-lg btn-outline-dark">6</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">7</button>
<button type="button" class="btn-lg btn-outline-dark">8</button>
<button type="button" class="btn-lg btn-outline-dark">9</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-light">±</button>
<button type="button" class="btn-lg btn-outline-dark">0</button>
<button type="button" class="btn-lg btn-outline-light">.</button>
</div>
</div>
<div class="col-md-4">
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">X</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">-</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">+</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">=</button>
</div>
</div>
</div>
</div>
EDIT: While I can only select one solution as the answer, I would like to acknowledge kiranvj, WebDevBooster, and dferenc for providing functional solutions based on the Bootstrap 4 release version. My decision is limited to marking just one response as the answer, but all contributions are appreciated. Thank you for your support.