Bootstrap Grid – Stacked-to-Horizontal
Bootstrap’s grid system can be used to create layouts that stack on smaller screens and display horizontally on larger screens. This is achieved using the col-* classes and the responsive breakpoint classes.
For example, to create a layout with three columns that stack on small screens and display horizontally on medium screens and larger, you could use the following HTML:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">Column 1</div>
<div class="col-sm-4 col-md-4">Column 2</div>
<div class="col-sm-4 col-md-4">Column 3</div>
</div>
</div>
Bootstrap Grid – Stacked-to-Horizontal
In this example, the columns will stack vertically on screens that are smaller than the sm breakpoint (typically 576px) and display horizontally on screens that are sm or larger.
You can also use the col-*-offset-* classes to offset columns, and the col-*-push-* and col-*-pull-* classes to re-order columns on different screen sizes.
Here’s an example that uses offsetting and re-ordering:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-3 col-md-push-6">Column 1</div>
<div class="col-sm-4 col-md-3 col-md-push-6">Column 2</div>
<div class="col-sm-4 col-md-6 col-md-pull-6 col-md-offset-3">Column 3</div>
</div>
</div>
In this example, on screens that are smaller than the sm breakpoint, the columns will stack vertically in the order 1, 2, 3. On screens that are sm or larger, the columns will display horizontally in the order 3, 1, 2. The third column is also offset by three columns and pulled to the left by six columns on md screens or larger.