title: Boostrap 3 - col-md-4 to col-sm-6, or grid of 3x2 to 2x3
body: <p>How can I change a grid of 3x2 to 2x3 without having an empty space where one row ends and another starts?</p>
  
  <p>For example:</p>
  
  <pre><code> &lt;div class="row"&gt; 
       &lt;div class="col-md-4 col-sm-6"&gt;
          content
      &lt;/div&gt;
      &lt;div class="col-md-4 col-sm-6"&gt;
          content
      &lt;/div&gt;
      &lt;div class="col-md-4 col-sm-6"&gt;
          content
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt; 
      &lt;div class="col-md-4 col-sm-6"&gt;
          content
      &lt;/div&gt;
      &lt;div class="col-md-4 col-sm-6"&gt;
          content
      &lt;/div&gt;
      &lt;div class="col-md-4 col-sm-6"&gt;
          content
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what I want to achieve:</p>
  
  <p>This:
  <img src="https://i.stack.imgur.com/6sxXq.jpg" alt="enter image description here"></p>
  
  <p>To this: <img src="https://i.stack.imgur.com/gDhPG.jpg" alt="enter image description here"></p>
  
  <p>But instead I get this:<img src="https://i.stack.imgur.com/V0zHo.jpg" alt="enter image description here"></p>