Column Ordering
Order utilities change the visual sequence of flex items without requiring the HTML to be rearranged.
Core concept
Explain order-1 through order-5 and first/last helpers, including responsive order changes. Distinguish visual presentation from source order because screen readers and keyboard users generally follow the document structure.
Using it in a real interface
Use a mobile product page as an example where the image might appear before details on small screens but beside them on larger screens. Explain when CSS order is appropriate and when the HTML should simply be written in the desired semantic order.
Implementation notes
Do not use ordering to repair poor document structure. Important reading and interaction sequences should make sense without relying on visual reordering.
ADVERTISEMENT