Grid Stacked to Horizontal

One of the most important behaviors of the Bootstrap grid system is the concept of "Stacked to Horizontal." Because Bootstrap uses a mobile-first approach, layouts will naturally stack vertically (take up 100% width) on small phone screens, and automatically turn into horizontal columns side-by-side as the screen gets larger.

What Does "Stacked" Mean?

When you use a class like .col-sm-* or .col-md-*, the column sizing only applies to that specific screen size and anything larger.

If the user is viewing the site on a screen smaller than that breakpoint, the columns will automatically "stack" on top of each other, functioning just like traditional block-level elements spreading 100% across the screen.

Example: Stacked on Mobile, Horizontal on Small (≥576px)

In this example, we use the .col-sm-4 and .col-sm-8 classes. Resize your browser window below 576px wide (a typical mobile phone width), and you will see the columns snap from sitting side-by-side to stacking vertically.

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            Left column (4 parts)
        </div>
        <div class="col-sm-8">
            Right column (8 parts)
        </div>
    </div>
</div>

Example: Stacked on Mobile/Tablet, Horizontal on Medium (≥768px)

If you prefer your columns to stay stacked even on small tablets, you should use the .col-md-* classes instead. The layout below will stay vertically stacked until the screen reaches 768px wide.

<div class="container">
    <div class="row">
        <div class="col-md-6">Half width on medium screens and up</div>
        <div class="col-md-6">Half width on medium screens and up</div>
    </div>
</div>

Why is this important?

• Better Readability: Reading text inside a tiny 3-inch wide horizontal column on a smartphone is difficult. Stacking allows text to flow naturally across the full phone screen.
• Space Optimization: Images and complex components (like pricing tables) fit beautifully when stacked on mobile but look great side-by-side on desktops.
• Less Code: You do not need to write complex custom Media Queries to achieve this. By just writing .col-sm-6, the framework handles the stacking geometry for you instantly.