order

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.

Syntax

/* <integer> values */
order: 5;
order: -5;

/* Global values */
order: inherit;
order: initial;
order: revert;
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

Formal syntax

<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

<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>

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

Browser compatibility

See also

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