Layout
order
order goes on a flex or grid item and changes the order the items are laid out in, away from their order in the HTML.
Syntax
<integer>Preview
Code
.box {
display: flex;
}
.box > :nth-child(2) {
order: -1;
}Controls
About
Values
Write an integer. The initial value is 0, and items are laid out from the lowest value to the highest. Items with the same value keep their order in the HTML. Negative values are allowed, so -1 moves a single item to the front and 1 moves it to the end.
The preview on this page makes the box display: flex with a helper declaration and puts order on the second item only (.box > :nth-child(2) is a selector for the second child of the box). The other items keep the initial 0, so only the outlined item 2 moves to the front or the end.
In a grid it changes the order in which items are placed into cells automatically. Items placed with grid-column and similar properties go where they are told, whatever their order.
Only the visual order changes
order only changes the order on screen. The order in which the Tab key moves focus and the order a screen reader reads in stay the same as in the HTML. Reordering links or buttons with order makes focus jump back and forth, which is hard to use. Put content whose order carries meaning in that order in the HTML.
In Chrome and Edge (137 and later), reading-flow: flex-visual on the container makes focus follow the visual order. Firefox and Safari don't support it yet.