order

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: 

.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.

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.flex-item:nth-of-type(1) { order: 3; }
.flex-item:nth-of-type(2) { order: 4; }
.flex-item:nth-of-type(3) { order: 1; }
.flex-item:nth-of-type(4) { order: 5; }
.flex-item:nth-of-type(5) { order: 2; }

.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 5px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

Related Properties

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

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;)

Blackberry browser 10+ supports the new syntax.