order
Changes the visual order of a flex or grid item.
Syntax
order: number;Values
| Parameter | Type | Description |
|---|---|---|
| 0 | integer | The default: items follow the markup. |
| number | integer | Items with smaller numbers come first; negative numbers are allowed. |
Examples
The second item moves to the front:
<style>
.row { display: flex; gap: 6px; }
.row div { padding: 6px 12px; background: lightgreen; }
</style>
<div class="row">
<div>1</div>
<div style="order: -1;">2 (order: -1)</div>
<div>3</div>
</div>Notes
order changes only what is shown: the Tab key and screen readers still follow the markup. Use it for small layout tweaks, not to rearrange meaningful content.
See also
- flex-direction — The direction of the main axis of a flex container: items in a row or in a column.
- grid-area — Places a grid item into a named area or between given lines.
Related recipes
In the tutorial
- Flex items — How to control individual items in flexbox — flex-grow, flex-shrink, flex-basis, the flex shorthand, align-self, order and margin auto.