CSS Order Property
The order CSS property specifies the order of a flex or grid item in its container. Items are laid out in the source order by default, but the order property gives you the power to change this visual sequence.
How it Works
All flex/grid items have a default order value of 0.
- Negative values: (e.g.,
-1) move the item to the beginning of the container. - Positive values: (e.g.,
1,2) move the item towards the end. - Same values: If two items have the same order value, they are sorted according to the HTML source order.
Accessibility Concerns
Warning: Visual Order vs. DOM Order
Changing the visual order using CSS does not change the DOM order. Screen readers, keyboard navigation (tabbing), and non-visual user agents will interact with the content based on the HTML source order, not the CSS order.
Best Practices
Use order primarily for visual layout adjustments, such as responsive design (e.g., moving a sidebar below content on mobile). Do not use it to reorder meaningful content like form fields or navigation links, as this breaks the logical tab flow for keyboard users.