title: CSS wrapping different numbers of columns in a responsive layout with two to three columns
body: <p>I'm trying to wrap some column style divs in a row.  Then apply overflow:hidden; to the row to make whatever floated columns are in the next row line up.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col"&gt;Column 1&lt;/div&gt;
      &lt;div class="col"&gt;Column 2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col"&gt;Column 3&lt;/div&gt;
      &lt;div class="col"&gt;Column 4&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col"&gt;Column 5&lt;/div&gt;
      &lt;div class="col"&gt;Column 6&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then use:</p>
  
  <pre><code>.row{ overflow:hidden; }
  .col{
      width:50%;
      float:left;
  }
  </code></pre>
  
  <p>The problem is, on a larger screen I want to effectively move the row divs so I can show 3 columns:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col"&gt;Column 1&lt;/div&gt;
      &lt;div class="col"&gt;Column 2&lt;/div&gt;
      &lt;div class="col"&gt;Column 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col"&gt;Column 4&lt;/div&gt;
      &lt;div class="col"&gt;Column 5&lt;/div&gt;
      &lt;div class="col"&gt;Column 6&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And use:</p>
  
  <pre><code>.row{ overflow:hidden; }
  .col{
      width:33%;
      float:left;
  }
  </code></pre>
  
  <p>Now, I know this can't be done in CSS, but are there any other ways for wrapping columns or getting this effect using CSS which I can use?  The best I've come up with is a rather ugly version using extra elements:</p>
  
  <p><a href="http://codepen.io/djave_co/pen/EIHzt" rel="nofollow">http://codepen.io/djave_co/pen/EIHzt</a></p>
  
  <p>If you resize the screen you can see its working, but its not very neat or semantic.</p>