Bootstrap Grid – Stacked-to-Horizontal Layout
Bootstrap Grid – Stacked-to-Horizontal Layout
The stacked-to-horizontal grid is a responsive layout pattern where:
-
On small screens (phones) → columns stack vertically.
-
On larger screens (tablets, desktops) → columns are arranged horizontally side-by-side.
Bootstrap achieves this using responsive classes like:
📌 Concept Example
If you assign:
It means:
-
On extra small screens (<576px) → takes full width (stacked).
-
On small screens (≥576px) → takes 4/12 width (horizontal).
📌 Example: 2 Column Stacked-to-Horizontal
📱 On mobile →
🖥️ On larger screens →
📌 Example: 3 Column Stacked-to-Horizontal
📌 Mixed Breakpoints Example
You can control stacking differently for each screen size:
📱 On mobile:
🖥️ On desktop:
📌 Summary
| Screen Size | Behavior |
|---|---|
| Extra small (col-) | Stacks automatically |
| Small and above (col-sm-) | Can become horizontal |
🎯 Why Use Stacked-to-Horizontal?
✔ Better readability on mobile
✔ Saves space on desktops
✔ Automatically adjusts layout based on device size
