title: Stack bootstrap blocks from 3x2 to 2x3 format
body: <p>In the footer of my website I have 6 blocks.
  On small screens I want them stacked as 2x3</p>
  
  <pre><code> &lt;div class="row"&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="aboutme"&gt;
                  &lt;div class="headline"&gt;&lt;h2&gt;&lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;About me&lt;/h2&gt;&lt;/div&gt;
                  &lt;div class="box"&gt;
                      &lt;img class="portrait" src="assets/img/portrait.jpg" /&gt;
                      testje
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="headline"&gt;&lt;h2&gt;&lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;Recent blog posts&lt;/h2&gt;&lt;/div&gt;
              &lt;div class="box"&gt;
  
              &lt;/div&gt;  
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="headline"&gt;&lt;h2&gt;&lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;Recent projects&lt;/h2&gt;&lt;/div&gt;
              &lt;div class="box"&gt;&lt;/div&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="headline"&gt;&lt;h2&gt;&lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;Books&lt;/h2&gt;&lt;/div&gt;
              &lt;div class="box"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="headline"&gt;&lt;h2&gt;&lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;Stay connected&lt;/h2&gt;&lt;/div&gt;
              &lt;div class="box"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="headline"&gt;&lt;h2&gt;&lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;Drop a line&lt;/h2&gt;&lt;/div&gt;
              &lt;div class="box"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Do I need to start a new row or can I rely on the stacking process if column number exceeds 12?</p>
  
  <p>At this moment it is stacked as follows:</p>
  
  <pre><code>[][]
    []
  [][]
    []
  </code></pre>
  
  <p>So it needs a sort of float fix I think</p>