Order Property
Last updated: 2026-09-13
order Order Property
The order property sets the display order of flex items inside a container. Its default value is 0. Items with smaller values appear first; items with equal values are ordered by their DOM position. The property changes the visual order only, never the DOM structure, so it also affects the reading order of screen readers and the Tab-key focus order. Use it carefully.
| Category | |
|---|---|
| Initial Value | 0 |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
order: <integer>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<integer> | Type | Display order of flex items |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| order | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： order accepts integer values, including negative numbers. All items default to 0; a negative value pushes an item to the front and a positive value moves it to the back.
Warning： order changes the screen-reader and keyboard-focus order, which may no longer match the DOM order and affects accessibility. Use it only for purely visual adjustments and avoid reordering content that has logical meaning.
❓ FAQ
QDoes order change the DOM order?
ANo. order only changes the visual presentation; the DOM structure stays untouched, so JavaScript node iteration, the screen-reader reading order and the Tab-key focus order still follow the original DOM order. The effect is purely visual and does not change how the page is serialized, so search engines and assistive technology still see the DOM sequence. If the items are links or form controls, a visual order that differs from the focus order can confuse users, so evaluate the accessibility impact before using it.
QHow is order useful in responsive layouts?
ACombined with media queries, order lets you change the display order without touching the HTML: for example, on mobile the main content moves first and the sidebar moves later, while on desktop the original order is restored. A typical rule looks like @media (max-width: 768px) { .sidebar { order: 1 } }. It fits layouts whose content order changes per device, but avoid overusing it - heavy reordering hurts code readability.
QIn what order are items with the same order value arranged?
AThe items are first sorted by their order value from smallest to largest; when the values are equal, they are arranged by their writing order in the DOM. The default order is 0, and negative values come before the regular items, so order: -1 moves an item to the very front while order: 1 moves it to the back. In practice, use order sparingly on individual items and avoid building an ordering scheme across many items, which becomes hard to understand.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Flex Layout Property
Learn the core shorthand of flex layout
Main Axis Direction
Reverse the item order with row-reverse or column-reverse
