title: How to wrap items in flexbox for smaller screens?
body: <p>I'm trying to create a layout for different resize. I need to reach the result in these images here:</p>
  
  <p><a href="https://i.stack.imgur.com/5STUu.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/5STUu.jpg" alt="flexbox result"></a></p>
  
  <p>I have this code:</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>.container {
    position: relative;
    display: flex;
    align-items: stretch;
  }
  .item {
    background-color: black;
    box-sizing: border-box;
    padding: 20px;
    flex: 2;
    color: #fff;
  }
  .item:nth-child(2) {
    background-color: grey;
    flex: 1
  }
  .item:nth-child(3) {
    background-color: green;
    flex: 0.5;
  }
  @media screen and (max-width: 990px) {
    .container {
      height: auto;
      display: table;
    }
    .item:nth-child(2) {
      float: left;
    }
    .item:nth-child(3) {
      float: right;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="container"&gt;
    &lt;div class="item"&gt;
      &lt;h2&gt;title1&lt;/h2&gt;
      &lt;hr&gt;You'll notice that even though this column has far more content in it, instead of the other columns ending early, they size themselves to meet the end of this column vertically.&lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;h2&gt;title2&lt;/h2&gt;
      &lt;hr&gt;Normally, the only way to achieve this would be either a hack, or to set all boxes to min-height.
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;h2&gt;title3&lt;/h2&gt;
      &lt;hr&gt;This is a column with not much content.
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here there's a codepen <a href="https://codepen.io/darudev/pen/pyBrzL" rel="noreferrer">https://codepen.io/darudev/pen/pyBrzL</a></p>
  
  <p>Problem is in 990px resize view, I don't find solution to create the same view as "mockup".</p>
  
  <p>Is there someone that can help me or give me some suggestions?</p>
  
  <p>Thank you.</p>