The order property is a sub-property of the Flexible Box Layout module.

Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering.

Syntax

order: <number>

.flex-item {
  order: 2;
}

Demo

The following demo shows how the default order (1, 2, 3, 4, 5) has been altered by setting the order property to each item.

Check out this Pen!

Related Properties

• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Other Resources

• order in the spec
• order at MDN
• Advanced cross-browser flexbox
• A guide to Flexbox
• Using Flexbox
• Old Flexbox and new Flexbox

Browser Support

• (modern) means the recent syntax from the specification (e.g. display: flex;)
• (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
• (old) means the old syntax from 2009 (e.g. display: box;)

Chrome	Safari	Firefox	Opera	IE	Android	iOS
21+ (modern) 20- (old)	3.1+ (old)	2-21 (old) 22+ (new)	12.1+ (modern)	10+ (hybrid)	2.1+ (old)	3.2+ (old)

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).