order
=====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
The **`order`** CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order. Items not given an explicit `order` value are assigned the default value of `0`.

Try it
------

In the above demo, select the options on the left-hand side to change the value of the purple box's `order` property. The blue boxes have been given fixed `order` values.

Bear in mind the effect of source order. When `order: 2;` is selected for example, the purple box is placed before the two blue boxes with `order: 2;`. This is because the purple box appears before the blue boxes in the source code.

Syntax
------


```css
/\* <integer> values \*/
order: 5;
order: -5;

/\* Global values \*/
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;
```


Since `order` is only meant to affect the *visual order* of elements and not their logical or tab order. `order` must not be used on non-visual media such as speech.

### Values

`<integer>`

Represents the ordinal group to be used by the item.

Accessibility concerns
----------------------

Using the `order` property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN Understanding WCAG, Guideline 1.3 explanations
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | Flex items, grid items, and absolutely-positioned flex and grid container children |
| Inherited | no |
| Computed value | as specified |
| Animation type | an integer |

Formal syntax
-------------
```

order =   
  [ <'layout-order'> <'reading-order'>? ]  |  
  [ [ reading || layout ] && <integer> ]     
  
```

Examples
--------

### Ordering items in a flex container

This example uses CSS to create a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available.

#### HTML


```html
<header>…</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>…</footer>
```


#### CSS


```css
main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Display Module Level 3 # order-property |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Ordering flex items*
* CSS Grid Guide: *CSS Grid Layout and accessibility*