3 Columns on Desktop to 2 Columns on Tablet

Question

I'm using bootstrap 3 and am trying to display multiple rows, each containing 3 boxes. All boxes are the same size so it is very uniform. You can picture it as a grid. On a tablet I want only two columns.

<div class="row">
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
</div>

<div class="row">
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
</div>

Now, this works great on my desktop. And on a mobile device they all collapse into one single column as desired. On a tablet, they all fall into two cloumns. However, the issue is that I have an uneven number of columns dividing into an even number of columns. This leaves a row of 2, followed by a row of 1. Then the next row creates a row of 2 followed by a row of 1.

Is there any simple way to make the next row "pop up" to complete rows of two columns on a tablet while maintaining 3 columns on a desktop? As it stands I have empty columns in every-other-row on my tablet.

Answer 1

Don't put them into separate rows and it should behave the way you described...

<div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
</div>

Fiddle... http://jsfiddle.net/gmU7w/