Columns Based on Screen Size

The following grid has columns that will change width based on the screen size.
If window size > 0 it will take up 12 columns / 100% width.
If window size > 768px it will take up 4 columns / 33% width.
If window size > 992px it the middle column will take up 6 columns / 50% width, other two will take up 3 columns / 25% width.

col col-12 col-md-4 col-lg-3

col col-12 col-md-4 col-lg-6

col col-12 col-md-4 col-lg-3

Equal Width Columns

The following grid has equal width columns.

col

Variable Sized / Offset Columns

The following grid has columns that take up different widths on each row.

col col-6

col

col col-4

col

col col-4

col col-3

col col-3 offset-3

Push / Pull Columns

The following grid has columns that are reordered using push or pull.

1st col col-9 push-3

2nd col col-3 pull-9

1st col col-md-6 push-md-3

2nd col col-md-3 push-md-3

3rd col col-md-3 pull-md-9

Column Alignment

The following grid has columns that align themselves vertically inside of the row based on the attribute.

col

col
#

col
#
#

col
#
#
#

col top

col center

col bottom

col
#
#
#

row top col

row top col bottom

col
#
#
#

row center col

col
#
#
#

row bottom col

row bottom col top

row bottom col

col
#
#
#

Responsive Rows

The following grid will take up 12 columns until the sm breakpoint (576px) at which point it will take equal width.

row col col-12 col-sm

The following grid will take up 12 columns until the md breakpoint (768px) at which point it will take equal width.

row col col-12 col-md

The following grid will take up 12 columns until the lg breakpoint (992px) at which point it will change to take up 6 and 3 columns.

row col col-12 col-lg-6 offset-lg-3

row col col-12 col-lg-3

Miscellaneous Features

The following grid has no padding.

grid no-padding col

The following grid reverses the order of the columns when wrapping on small screens.

row wrap-reverse 1st col col-12 col-md

row wrap-reverse 2nd col col-12 col-md

row wrap-reverse 3rd col col-12 col-md