.d-flex or .d-inline-flex makes a flex container (CSS explains flexbox), and the classes below tune it. All accept breakpoint infixes: .flex-column flex-md-row stacks items on phones and lines them up from 768 pixels. To push items apart, use an auto margin: .ms-auto sends an item and those after it to the end of a row.
| Purpose | Classes |
|---|---|
| Direction | .flex-row, .flex-column, -reverse |
| Main axis | .justify-content-* (start ... between, evenly) |
| Cross axis | .align-items-* (start, center, baseline...) |
| Single item | .align-self-*, .order-* (0-5, first, last) |
| Grow, shrink, wrap | .flex-grow-1, .flex-shrink-0, .flex-wrap |