flowdirection.html

<html>
  <head>
      <title>Flexbox Grids</title>
      <link rel="stylesheet" href="css/showcase.css">
      <link rel="stylesheet" href="css/flowdirection.css">
      <link href="https://fonts.googleapis.com/css?family=Ubuntu:300" rel="stylesheet">
  </head>
  <body>

    <h2>Property: <code>flex-direction</code></h2>

    <code>flex-direction: row;</code>
    <div class="row container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>

    <code>flex-direction: row-reverse;</code>
    <div class="row-reverse container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>

    <code>flex-direction: column;</code>
    <div class="column container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>

    <code>flex-direction: column-reverse;</code>
    <div class="column-reverse container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>