title: Using the flex order property across multiple containers
body: <p>If I have the following HTML markup:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div id="container-1"&gt;
      &lt;div class="child-1-1"&gt;&lt;/div&gt;
      &lt;div class="child-1-2"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="container-2"&gt;
      &lt;div class="child-2-1"&gt;&lt;/div&gt;
      &lt;div class="child-2-2"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can apply a display of <strong>flex</strong> to <em>wrapper</em>, and then make <em>container-2</em> appear above <em>container-1</em> using <strong>order</strong>.</p>
  
  <p>I would like the final order of the elements to be:</p>
  
  <ol>
  <li>child-2-1</li>
  <li>child-1-1</li>
  <li>child-1-2</li>
  <li>child-2-2</li>
  </ol>
  
  <p>What I basically want is for the children of the two containers to pretend as if their parents are not there, and instead take their ordering from the outer <em>wrapper</em>.</p>
  
  <p>This could of course be achieved via either duplicating the components and hiding/showing depending on the breakpoint, or via JS - so no points for suggesting those.</p>