title: How to move last flex-item on a new column in flexbox column layout?
body: <p>How can I get a column flex layout to wrap the last item into a new column. I do not wish to set a fixed height on the container.</p>
  
  <p>So below I want <code>.image</code> on a new column row.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;   
      &lt;div class="title"&gt;&lt;/div&gt;
      &lt;div class="text"&gt;&lt;/div&gt;
      &lt;div class="image"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
  }
  </code></pre>