order
Changes the visual order of items within a flex or grid container without changing their actual order in the HTML code.
Quick example
.sticky-nav {
order: 999;
} /* moves the nav to the end of the flex container */Syntax
order: <integer>0<positive integer><negative integer>Quick facts
0Examples
Move one item to the end
.nav {
display: flex;
}
.nav .logout {
order: 1;
}Everything else has the default order of 0. The logout link has 1, so it appears last regardless of where it sits in the HTML.
Pull an item to the front
.cards .featured {
order: -1;
}Featured card appears first visually. Useful when content order is fixed by a CMS but visual priority needs to differ.
Reorder groups of items
.items .primary { order: 1; }
.items .secondary { order: 2; }
.items .tertiary { order: 3; }Group items into visual tiers. All primary items come first, then secondary, then tertiary, regardless of HTML order.
order Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
Common pitfalls
order only affects visual layout. Tab order, screen reader reading order, and focus flow still follow the HTML source. Heavy use of order creates a confusing experience for keyboard and assistive technology users. Only reorder when visual and reading order can diverge without harm.
order has no effect on regular block or inline elements. The parent must have display: flex or display: grid.
When multiple items share the same order value, they fall back to HTML document order between them. Two items with order: 1 keep their relative HTML sequence.