A column class with an infix applies from that breakpoint up. Below it, the column falls back to the next smaller class you gave, or to width: 100% if none, which stacks the columns. In the previous listing the sm row splits 4 + 8 at 720px, while col-md-8 is still full width and its sibling uses the unprefixed col-6; from 768px the third row becomes 8 + 4. So write the phone layout first and override upward, as in col-12 col-sm-6 col-lg-3, and test by dragging the viewport width in the browser's device mode (Device Mode and Remote Debug).