Display, flex direction, justify, align, wrap, and self-alignment. All with breakpoint variants.
hidden block-md — visible from md
hidden block-lg — visible from lg
hidden block-xxl — visible from xxl
flex flex-row
A
B
C
flex flex-col
A
B
C
flex flex-row-reverse
1
2
3
flex flex-col-reverse
1
2
3
flex flex-col flex-md-rowStacks on mobile
Row from md up
Fluid gap
flex flex-wrap gap-8Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
Tag 7
Tag 8
flex-nowrap prevents wrapping (items overflow instead).
A
B
justify-start
A
B
justify-center
A
B
justify-end
A
justify-between
C
A
justify-around
C
A
justify-evenly
C
All support breakpoints, middle or end position: justify-md-center ≡ justify-center-md, flex-md-row-reverse ≡ flex-row-reverse-md.
align-start
A
B tall
C
align-center
A
B tall
C
align-end
A
B tall
C
align-stretch
A
B
align-baseline
small
BIG
small
self-auto
self-auto
self-start
self-center
self-end
self-stretch
Unitless integer → order: N. Works on flex and grid items. Fixed-only, positive integers, supports breakpoints.
order-1 on the first item pushes it to the end
A (order-1)
B
C
order-md-2 / order-lg-4 — reorders only at breakpoints (resize to see)
A (md:2)
B
C (lg:4)
D