Bootstrap - Stacked-to-Horizontal

What Does “Stacked-to-Horizontal” Mean?

A stacked-to-horizontal layout means that:

On small screens (like mobile phones), elements are stacked vertically (one on top of another).
On larger screens (like tablets, laptops, or desktops), those same elements are displayed side by side (horizontally).

This is a responsive design pattern — it automatically adapts to different screen sizes.

Why Is It Important?

Different devices have different screen widths.

On mobile, there isn’t much horizontal space — so stacking vertically looks better.
On desktop, you have more width — so showing items side by side uses space more efficiently.

Bootstrap makes this easy using its grid system and responsive classes.

How to Create Stacked-to-Horizontal Layouts

Bootstrap’s grid system is the main tool for creating stacked-to-horizontal layouts.

It uses:

.row → to create a horizontal group of columns
.col-* → to define how wide each column should be at different screen sizes

1. Basic Example

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 bg-light border">Column 1</div>
    <div class="col-12 col-md-6 bg-secondary border text-white">Column 2</div>
  </div>
</div>

How it works:

col-12 → means full width on extra-small screens (stacked vertically).
col-md-6 → means half width on medium screens and up (side by side horizontally).

So:

On mobile phones → Column 1 and Column 2 are stacked.
On tablets or larger screens → they appear next to each other.

✅ This is the stacked-to-horizontal layout pattern!

2. Three-Column Example

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4 bg-light border">Column 1</div>
    <div class="col-12 col-md-4 bg-secondary border text-white">Column 2</div>
    <div class="col-12 col-md-4 bg-light border">Column 3</div>
  </div>
</div>

On small screens → all three columns are stacked vertically (col-12).
On medium and larger screens → they line up in three equal columns (col-md-4 each).

3. Using Flexbox Utilities

You can also achieve stacked-to-horizontal layouts using Flexbox utilities — no grid required.

<div class="d-flex flex-column flex-md-row">
  <div class="p-3 bg-light border flex-fill">Item 1</div>
  <div class="p-3 bg-secondary border text-white flex-fill">Item 2</div>
</div>

Explanation:

d-flex → makes the container a flexbox.
flex-column → stacks items vertically by default.
flex-md-row → changes layout to horizontal on medium screens and up.

Result:

On mobile → stacked vertically.
On tablet/desktop → arranged horizontally.

4. Example with Image and Text

A common real-world use case is displaying an image beside text on large screens, but stacked on mobile.

<div class="container">
  <div class="row align-items-center">
    <div class="col-12 col-md-6">
      <img src="example.jpg" class="img-fluid" alt="Example">
    </div>
    <div class="col-12 col-md-6">
      <h3>Responsive Layout</h3>
      <p>This image and text stack vertically on small screens and sit side by side on larger screens.</p>
    </div>
  </div>
</div>

On mobile: image is on top, text below (stacked).
On desktop: image and text are side by side (horizontal).

5. Responsive Breakpoints You Can Use

Breakpoint	Class Prefix	Screen Width
Extra small	`col-`	`<576px`
Small	`col-sm-`	`≥576px`
Medium	`col-md-`	`≥768px`
Large	`col-lg-`	`≥992px`
Extra large	`col-xl-`	`≥1200px`

You can decide when the layout changes by adjusting the breakpoint.

Example:

<div class="col-12 col-lg-6">...</div>

This layout will stack until the screen width reaches 992px, and then become horizontal.

6. Using Cards Example

<div class="card mb-3">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="image.jpg" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Responsive Card</h5>
        <p class="card-text">This card layout stacks on small screens and becomes horizontal on larger screens.</p>
      </div>
    </div>
  </div>
</div>

On small screens → image on top, text below.
On larger screens → image left, text right.

In Summary

Concept	Description
Definition	Layout that is vertical (stacked) on small screens and horizontal (side by side) on larger ones.
Created with	Bootstrap Grid (`.row`, `.col-*`) or Flexbox utilities (`.d-flex`, `.flex-md-row`).
Main idea	Use responsive column classes like `.col-12 col-md-6` to control when layout changes.
Common use	Two-column layouts (image + text, sidebar + content, etc.)

In Simple Words:

A stacked-to-horizontal layout in Bootstrap means your design starts stacked vertically on small screens and automatically switches to a side-by-side (horizontal) layout on bigger screens — using responsive grid or flex classes.