Every flex item has a default order value of 0, and items are displayed in ascending order of their order value, lowest first, with items sharing the same value falling back to their original source order relative to each other. This makes it possible to visually reorder items, like moving a specific item to the front or back of a row, purely through CSS, without touching the actual HTML markup — but critically, this reordering is purely visual, meaning it doesn't affect the DOM's actual source order at all, which can create a meaningful mismatch for keyboard navigation, tab order, and screen readers, both of which typically still follow the original, un-reordered source order.
1Understanding Order
Every flex item has a default order value of 0, and items are displayed in ascending order of their order value, lowest first, with items sharing the same value falling back to their original source order relative to each other. This makes it possible to visually reorder items, like moving a specific item to the front or back of a row, purely through CSS, without touching the actual HTML markup — but critically, this reordering is purely visual, meaning it doesn't affect the DOM's actual source order at all, which can create a meaningful mismatch for keyboard navigation, tab order, and screen readers, both of which typically still follow the original, un-reordered source order.
Use order sparingly and thoughtfully — since it only changes visual order, not the underlying DOM order, overusing it can create a confusing mismatch where a page's visual left-to-right or top-to-bottom order no longer matches its keyboard tab order or the order a screen reader announces content in.
.item-a { order: 2; }
.item-b { order: 1; }
.item-c { order: 3; }2Practical Example
Here is a real-world application of Order showing how it is used in production CSS code.
3Best Practices
Follow these guidelines when working with Order:
1. Use order for small, deliberate visual reordering needs, like moving a specific call-to-action button, rather than as a substitute for writing HTML in a sensible source order to begin with
2. Test keyboard tab order and screen reader behavior on any layout using order, since visual order and DOM/interaction order can diverge and create a confusing mismatch
3. Prefer writing HTML in its intended logical, accessible source order first, using order only for specific, limited visual exceptions rather than as a primary layout tool
Tip: Use order sparingly and thoughtfully — since it only changes visual order, not the underlying DOM order, overusing it can create a confusing mismatch where a page's visual left-to-right or top-to-bottom order no longer matches its keyboard tab order or the order a screen reader announces content in.
.item-a { order: 2; }
.item-b { order: 1; }
.item-c { order: 3; }