title: How to create flexbox responsive layout with multiple columns and rows
body: <p>I'm trying to create a mobile &amp; desktop responsive container that looks like <a href="https://i.imgur.com/ccYsK6X.png" rel="nofollow noreferrer">this</a>. The base HTML looks like the following and I can add any elements or classes as needed.</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;box1&quot;&gt;1&lt;/div&gt;
    &lt;div class=&quot;box2&quot;&gt;2&lt;/div&gt;
    &lt;div class=&quot;box3&quot;&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My own attempt led me to <a href="https://codepen.io/jacksoncohen/pen/NWgMoWX" rel="nofollow noreferrer">this</a>. The desktop version is just how I want it. But boxes 2 and 3 on mobile are swapped. I want it to display vertically and sequentially from 1 to 3. If I could put a container on 2 and 3, I would be able to use <code>flex-direction: column-reverse</code> in the media query but then the desktop view would be incorrect because I need the container on boxes 1 and 3 to put them in a column and set the <code>flex-basis</code>. Any input on how else to approach this would be appreciated.</p>