title: Writing flexbox code for 2-column and 3-column on desktop and mobile (wrap)
body: <p>I'm having a real hard time figuring out this CSS flexbox solution. Basically there are 2 issues, one with a 2-column and another with a 3-column layout.</p>
  
  <p>2-Column:<br>
  This, I think, may be pretty straightforward:</p>
  
  <p><img src="https://i.imgur.com/n81ItYk.jpg" alt="2-Column on desktop"></p>
  
  <p><img src="https://i.imgur.com/BCvLiNB.jpg" alt="2-Column on mobile"></p>
  
  <p>3-Column:<br>
  This is probably a bit more advanced:</p>
  
  <p><img src="https://i.imgur.com/RY1v3k8.jpg" alt="3-Column on desktop"></p>
  
  <p><img src="https://i.imgur.com/3zXkaX2.jpg" alt="3-Column on mobile"></p>
  
  <p>The container class is, well, <code>.container</code>, and the children are just <code>.left</code>, <code>.right</code>, and <code>.middle</code>. Not sure if it's relevant, but the width of <code>.container</code> is 100% of viewport. I should probably add that using Bootstrap is not possible, due to reasons out of my control.</p>