Stacked to Horizontal

Stacked to Horizontal

One of the most common patterns is the stacked to horizontal grid. On small screens columns stack vertically on top of each other. At a breakpoint, they line up side by side.

The classic example

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

On small screens (>= 576px) these become four columns side by side. Below that, they stack vertically.

Another common pattern

<div class="row">
  <div class="col-sm-8">.col-sm-8</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

Here we have two columns: 8 and 4, which together equal 12.

Without a breakpoint

Using .col-* without a breakpoint keeps columns horizontal at all times:

<div class="row">
  <div class="col-6">Always half</div>
  <div class="col-6">Always half</div>
</div>

TL;DR

• .col-sm-3 means 3 columns wide at small screens and up.
• Below the breakpoint, columns stack vertically.
• Numbers in one row should add up to 12.