Stacked & Horizontal Columns

Stacked Columns

By default, columns stack vertically on extra-small screens. .col-12 on mobile becomes side-by-side when you add .col-md-6 at md breakpoint.

This is the core responsive pattern: design for phone first (stacked), then widen for tablet and desktop.

Real-life example: Stacked columns are like books in a backpack — one on top of another on a narrow shelf, then side by side on a wide desk.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 bg-primary text-white p-3 mb-2 mb-md-0">Main content</div>
    <div class="col-12 col-md-4 bg-secondary text-white p-3">Sidebar</div>
  </div>
</div>

Horizontal Columns

Keep columns in one row with .row-cols-* on the row: .row-cols-2 forces two columns even on small screens. Combine with .row-cols-md-3 for responsive counts.

Real-life example: Horizontal columns are like seats in a cinema row — you decide how many seats per row at each screen size.

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
    <div class="col"><div class="border p-3">Card 1</div></div>
    <div class="col"><div class="border p-3">Card 2</div></div>
    <div class="col"><div class="border p-3">Card 3</div></div>
    <div class="col"><div class="border p-3">Card 4</div></div>
  </div>
</div>