title: How to wrap four columns into two rows of two columns with flexbox?
body: <p>We are using flexbox and attempting to the following below. The goal is to have one column per item on mobile breakpoints, two columns on tablet breakpoints, and four columns on desktop breakpoints. </p>
  
  <p>The example uses just four items, but let's say i had 5 or 6 items, then i just wanted the items to be responsive. If the row only has enough space to display 2 items per row, then i would expect each item to continue to move below the row above it.</p>
  
  <p>How can this be achieved? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-row {
    display: flex;
    @media screen and (min-width: 768px) {
      flex: 1;
      flex-direction: row;
      justify-content: space-between;
    }
  }
  
  .flex-col {
    margin: 6px;
    padding: 16px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    flex-direction: column;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="flex-row"&gt;
      &lt;div class="flex-col"&gt;Assertively negotiate interoperable portals without cross functional process improvements. Dramatically incentivize tactical best practices with.&lt;/div&gt;
      &lt;div class="flex-col"&gt;Seamlessly grow competitive.&lt;/div&gt;
      &lt;div class="flex-col"&gt;Distinctively optimize user-centric mindshare vis-a-vis plug-and-play infomediaries. Seamlessly optimize impactful solutions and enabled infrastructures.&lt;/div&gt;
      &lt;div class="flex-col"&gt;Dynamically extend flexible catalysts for change via pandemic supply chains. Efficiently.&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Current results</p>
  
  <p><a href="https://i.stack.imgur.com/7P0M9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7P0M9.png" alt="current"></a></p>
  
  <p>Expected results on tablet</p>
  
  <p><a href="https://i.stack.imgur.com/UGvl9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UGvl9.png" alt="expected"></a></p>