title: Ordering flex items in different containers
body: <p>My desktop design has 2 textboxes in the left column and one textarea in the right column. The order of desktop is as follows:</p>
  <ul>
  <li>Field 1</li>
  <li>Field 2</li>
  <li>Field 3</li>
  </ul>
  <p><a href="https://i.stack.imgur.com/iegqx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iegqx.png" alt="enter image description here" /></a></p>
  <p>On mobile however, the order should change to:</p>
  <ul>
  <li>Field 1</li>
  <li>Field 3</li>
  <li>Field 2</li>
  </ul>
  <p><a href="https://i.stack.imgur.com/pglkx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pglkx.png" alt="enter image description here" /></a></p>
  <p>My HTML structure is as follows:</p>
  <pre><code>&lt;form&gt;
  
  &lt;div class=&quot;col-half&quot;&gt;
  
      &lt;div class=&quot;field-1&quot;&gt;
          &lt;label&gt;Field 1&lt;/label&gt;
          &lt;input type=&quot;text&quot;&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;field-2&quot;&gt;
          &lt;label&gt;Field 2&lt;/label&gt;
          &lt;select&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class=&quot;col-half field-3&quot;&gt;
      &lt;label&gt;Field 3&lt;/label&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  <p>I've been able to do the desktop design however I'm struggling to re-order it correctly for mobile. My 2 questions are:</p>
  <ul>
  <li>Is it possible to use flex order to re-order elements which are inside separate containers?</li>
  <li>Is it possible to change my html structure to allow both the design &amp; ordering of the desktop and mobile design?</li>
  </ul>