title: Responsive flexbox with 3 items per row, then 2, then 1
body: <p>I have a section which contain six items.</p>
  
  <p>I want 3 items per row on desktop, and on medium device I want 2 items per row, and 1 one Item per on mobile device</p>
  
  <pre><code>&lt;div class="flex-container"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div&gt;2&lt;/div&gt;
    &lt;div&gt;3&lt;/div&gt;  
    &lt;div&gt;4&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div&gt;6&lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>Here is css:</p>
  
  <pre><code>.flex-container{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
  }
  
  @media only screen and (max-width: 768px) and (min-width: 320px){
      .flex-container {
          display: flex;
          justify-content: center;
          flex-basis: 100%;
      }
  }
  </code></pre>
  
  <p>This shows me only 3 items on desktop and one per item in mobile, but no 2 items, what do I need to change in my code to get what I want?</p>