This is an important message requiring you to make a choice if you're based in the EU.

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.

The order property is one of the CSS3 properties.

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


order: number | initial | inherit;


<!DOCTYPE html>
    <title>Title of the document</title>
      #example {
      width: 400px;
      height: 200px;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      display: flex;
      #example div {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: #fff;
      font-size: 30px;
      font-family: sans-serif;
      /* 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;}
    <h2>Order property example</h2>
    <div id="example">
      <div style="background-color: #1c87c9;" id="blue">1</div>
      <div style="background-color: #8ebf42;" id="green">2</div>
      <div style="background-color: #666;" id="grey">3</div>
      <div style="background-color: #f4f442;" id="yellow">4</div>

Another example with order property:


<!DOCTYPE html>
    <title>Title of the document</title>
      .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;
    <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>


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

21-28 -webkit-
12.0+ 28.0+ 9.0+
6.1-8.0 -webkit-

Practice Your Knowledge

The order property specifies the order of a

Do you find this helpful?

Related articles