#### Stacked to horizontal

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

#### Mobile and desktop

xs-12 .col-md-8
xs-6 .col-md-4
xs-6 .col-md-4
xs-6 .col-md-4
xs-6 .col-md-4
.col-6
.col-6

#### Mobile, tablet, desktop

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

#### Column wrapping

.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.

#### Responsive column resets

.col-6 .col-sm-3

Resize your viewport or check it out on your phone for an example.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3

#### Offsetting columns

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

#### Grid options

| Extra small devices Phones (<544px) | Small devices Tablets (≥544px) | Medium devices Desktops (≥768px) | Large devices Desktops (≥992px) | Large devices Desktops (≥1200px)
--- | --- | --- | --- | --- | ---
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints
Container width | None (auto) | 576px | 720px | 940px | 1140px
Class prefix | `.col-` | `.col-sm-` | `.col-md-` | `.col-lg-` | `.col-xl-`
# of columns | 12
Gutter width | 1.875rem / 30px (15px on each side of a column)
Nestable | Yes
Offsets | Yes
Column ordering | Yes