Column classes can depend on the width of the screen. In col-md-6, md is the breakpoint: from a screen width of 768 pixels, the column takes 6 of the 12 parts of a row. On narrower screens, it takes the whole row, so the columns are shown one below the other. Phones held upright are narrower than 576 pixels, tablets are usually 768 pixels or wider.
| Breakpoint | Example class | From a screen width of |
|---|---|---|
| Extra small | col-6 |
0 pixels |
| Small | col-sm-6 |
576 pixels |
| Medium | col-md-6 |
768 pixels |
| Large | col-lg-6 |
992 pixels |
| Extra large | col-xl-6 |
1,200 pixels |
| Extra extra large | col-xxl-6 |
1,400 pixels |
Several breakpoints
A column can have classes for several breakpoints. The columns below are shown one per line on phones, two per line from 768 pixels and three per line from 992 pixels. Make the browser window narrower to see them move.
- Code
<div class="row">
<div class="col-md-6 col-lg-4">First column</div>
<div class="col-md-6 col-lg-4">Second column</div>
<div class="col-md-6 col-lg-4">Third column</div>
</div>
- Result
First column
Second column
Third column
