Grid

You can responsively position elements using a flexbox grid. First, create a row to contain your columns with the .row class. Then add your columns within your row using one of the following classes: .col for all breakpoints, .col-sm for small breakpoints and up, .col-md for medium breakpoints and up, .col-lg for large breakpoints and up, and .col-xl for extra large breakpoints and up. These column classes will automatically size any number columns equally. Resize your browser to see them in action below.

Your content should always be within a column, and that column should always be within a row. You can also responsively define the column size based on a 12-column grid. You can make any class responsive just by adding *-sm, *-md, *-lg, or *-xl to the class name, but before a number if it contains one.

Containers are optional and can be added when needed. You can also add a .gap to containers or rows, .align rows to containers, responsively offset columns by a specified amount with the .off-* classes, embed rows within rows, and add a grid .outline class for development or debugging purposes.

You can even .reverse columns, reorder columns to be .first or .last in a row, and change the row alignment or distribution of columns.