order.html

<html>
  <head>
      <title>Flexbox Grids</title>
      <link rel="stylesheet" href="css/showcase.css">
      <link rel="stylesheet" href="css/order.css">
      <link href="https://fonts.googleapis.com/css?family=Ubuntu:300" rel="stylesheet">
  </head>
  <body>

    <h2>Property: <code>order</code></h2>

    <p>Default order</p>
    <div class="container">
      <div>1 <br>order: 0</div>
      <div>2 <br>order: 0</div>
      <div>3 <br>order: 0</div>
      <div>4 <br>order: 0</div>
    </div>

    <p>2 and 3 with custom order</p>
    <div class="order1 container">
      <div>1 <br>order: 0</div>
      <div>2 <br>order: -1</div>
      <div>3 <br>order: 1</div>
      <div>4 <br>order: 0</div>
    </div>

    <p>All with custom order</p>
    <div class="order2 container">
      <div>1 <br>order: 3</div>
      <div>2 <br>order: 2</div>
      <div>3 <br>order: 1</div>
      <div>4 <br>order: 2</div>
    </div>

  </body>
</html>