Grid System

##### 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

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
col-6 .col-md-4
.col-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 (<576px) | Small devices Tablets (≥576px) | 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) | 540px | 720px | 960px | 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