CSS свойство order

Свойство order определяет последовательность гибких элементов внутри флекс- или грид-контейнера .

Свойство order является частью модуля макета гибкого контейнера.

Если элемент не является гибким, свойство order не будет работать.

Значение по умолчанию	0
Применяется	К флекс-элементам и абсолютно-позиционированным потомкам флекс-контейнера.
Наследуется	Нет
Анимируемое	Да. Последовательность элементов анимируема
Версия	CSS3
DOM синтаксис	Object.style.order = "4";

Синтаксис

order: number | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      #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;}
    </style>
  </head>
  <body>
    <h2>Пример свойства order</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>
    </div>
  </body>
</html>

Попробуйте сами!

Другой пример со свойством order:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</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>

Попробуйте сами!

Значения

Значение	Описание
number	Устанавливает последовательность гибких элементов в контейнере. Значение по умолчанию - 0.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.