You can position elements using a grid based on flexbox with the
.col-lg classes. The b stands for breakpoint. The
.col-* classes will automatically size any number columns equally, but all have different breakpoints. The
.col class works on any screen size,
.col-sm works on small screens and up,
.col-md works on medium screens and up, and
.col-lg works on large screens and up. You can also add more breakpoints as needed.
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
*-lg 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-* class, embed rows within rows, and add a grid
.outline for development or debugging purposes.
You can even
.reverse columns, reorder columns to be
.last in a row, and change the row alignment or distribution of columns.