CSS order Property

The order property controls the visual ordering of items inside layout containers such as flex and grid without changing the underlying HTML source. It lets authors present items in a different sequence than they appear in the DOM, which can be useful for responsive rearrangements or for emphasizing particular items in a given viewport. Because it only affects items that participate in a layout mode, it only has effect when the container is set to a relevant mode like display that creates a flex or grid formatting context.

Using order interacts with the directional and placement rules of the layout system: the effective placement of an item is considered together with the container’s direction and flow settings, such as flex-direction for flexbox or grid-auto-flow for grid. Because the property changes where an item is painted rather than where it exists in the document tree, layout algorithms treat reordered items during the distribution of space, alignment, and wrapping, which can influence how other layout properties are applied.

Be cautious about accessibility and behavioral side effects when reordering visually. Screen readers, keyboard navigation and other user-agent behaviors typically follow document order rather than visual order, so relying on visual reordering alone can confuse sequential reading and focus order; when logical order matters, change the source order or provide appropriate accessibility markup instead. Also remember that reordering affects layout position only — stacking and overlap behaviors remain governed by stacking context rules and properties like z-index, so you may need to manage those separately if visual overlap is involved.