CSS order property

The order property specifies the order of a flexible item inside the flex or grid container.

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

If the element is not a flexible item, the order property does not work.

Initial Value 0
Applies to Flex items and absolutely-positioned flex container children.
Inherited No.
Animatable Yes. Order of the elements are animatable.
Version CSS3
DOM Syntax Object.style.order = "4";

Syntax

order: number | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      #example {
      width: 400px;
      height: 200px;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      #example div {
      width: 100px;
      height: 100px;
      }
      /* Safari 6.1+ */
      div#blue {-webkit-order: 2;}
      div#green  {-webkit-order: 3;}
      div#grey {-webkit-order: 1;}
      div#yellow  {-webkit-order: 4;}
      /* Standard syntax */
      div#blue   {order: 2;}
      div#green  {order: 3;}
      div#grey {order: 1;}
      div#yellow  {order: 4;}
    </style>
  </head>
  <body>
    <h2>Order property example</h2>
    <div id="example">
      <div style="background-color: #1c87c9;" id="blue"></div>
      <div style="background-color: #8ebf42;" id="green"></div>
      <div style="background-color: #666;" id="grey"></div>
      <div style="background-color: #f4f442;" id="yellow"></div>
    </div>
  </body>
</html>

Another example with order property:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      .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;
      }
      .box:nth-of-type(1) { order: 4; }
      .box:nth-of-type(2) { order: 1; }
      .box:nth-of-type(3) { order: 3; }
      .box:nth-of-type(4) { order: 5; }
      .box:nth-of-type(5) { order: 2; }
      .box {
      background: #1c87c9;
      padding: 5px;
      width: 100px;
      height: 100px;
      margin: 5px;
      line-height: 100px;
      color: #eee;
      font-weight: bold;
      font-size: 2em;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Order property</h2>
    <ul class="container">
      <li class="box">1</li>
      <li class="box">2</li>
      <li class="box">3</li>
      <li class="box">4</li>
      <li class="box">5</li>
    </ul>
  </body>
</html>

Values

Value Description
number Defines the order for the flexible item in the container. The default value is 0.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

29.0+
21-28 -webkit-
10.0+ -ms- 12.0+ 28.0+ 9.0+
6.1-8.0 -webkit-
12.1+



Related articles