title: Change columns presentation based on available size
body: <p>Im trying to have a layout like in the image. In desktop show 4 items, but if the browser is resized and there is less space show 2 items above 2 below. And if the browser is even more rezied on mobile for example show only 1 item per row.</p>
  <p>Im trying with this code but its not working. Do you know how to achieve that? Thanks!</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;item&quot;&gt;
      text
    &lt;/div&gt;
    &lt;div class=&quot;item&quot;&gt;
      text
    &lt;/div&gt;
    &lt;div class=&quot;item &quot;&gt;
      text
    &lt;/div&gt;
    &lt;div class=&quot;item&quot;&gt;
      text
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  
  .item:nth-child(1) {
    width:33%;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }
  
  .item:nth-child(2) {
    width:33%;
  
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }
  
  .item:nth-child(3) {
      width:33%;
  
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }
  
  .item:nth-child(4) {
      width:33%;
  
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }
  </code></pre>
  <p><a href="https://jsfiddle.net/y809xwfj/" rel="nofollow noreferrer">https://jsfiddle.net/y809xwfj/</a></p>
  <p><a href="https://i.stack.imgur.com/ktNFE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ktNFE.png" alt="enter image description here" /></a></p>