title: Using flex to reorder elements vertically and horizontally
body: <p>I'm using display: flex and order values to reorder elements for different breakpoints. It's been working well so far, but I have only been working with full-width elements so it's been straightforward up to this point. Now Id like to do the same, but put two of the elements next to each other. e.g.</p>
  
  <pre><code>&lt;div class="wrapper"&gt;    
      &lt;div class="object1"&gt;...&lt;/div&gt;
      &lt;div class="object2"&gt;...&lt;/div&gt;
      &lt;div class="object3"&gt;...&lt;/div&gt;
      &lt;div class="object4"&gt;...&lt;/div&gt;
      &lt;div class="object5"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Should be laid out like this:</p>
  
  <pre><code>[ object2               ]
  [ object3               ]
  [ object 1 ] [ object 5 ]
  [ object 4              ]
  </code></pre>
  
  <p>My CSS looks like this so far:</p>
  
  <pre><code>.wrapper {
      display: flex;
      flex-direction: column;
  }
  .object1 {
      order: 3;
      width: 50%;
  }
  .object2 {
      order: 1;
  }
  .object3 {
      order: 2;
  }
  .object4 {
      order: 5;
  }
  .object5 {
      order: 4;
      width: 50%;
  }
  </code></pre>
  
  <p>What this is giving me looks like this:</p>
  
  <pre><code>[ object2               ]
  [ object3               ]
  [ object 1 ]
  [ object 5 ]
  [ object 4              ]
  </code></pre>
  
  <p>Any pointers would be very gratefully received.</p>