TryIt Editor v2.0 - Пример CSS свойство order

Source Code: (back to article)

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