Bootstrap 3 row breaks on medium devices

Question

I have a problem with differently sized divs. I'd like to have and row that displays 3 column wide divs on medium & large displays and 6 column wide divs on small devices.

<div class="container">
<div class="row">
    <div class="service col-sm-6 col-md-3">Lots of stuff</div>
    <div class="service col-sm-6 col-md-3">Less stuff</div>
    <div class="service col-sm-6 col-md-3">Whooa!</div>
    <div class="service col-sm-6 col-md-3">More stuff</div>
</div>  
</div>  

on medium & large displays this looks like:

–––––––––––––––––   –––––––––––––––––   ––––––––––––––––   ––––––––––––––––
| Lots of stuff |   |   Less stuff  |   |   Whooa!     |   |  More stuff  |
|               |   –––––––––––––––––   |              |   |              |
|               |                       ––––––––––––––––   ––––––––––––––––
|               |
–––––––––––––––––

which is just great. but on small displays it looks like:

–––––––––––––––––   ––––––––––––––––– 
| Lots of stuff |   |   Less stuff  |
|               |   ––––––––––––––––– 
|               |   ––––––––––––––––
|               |   |    Whooa!    |
–––––––––––––––––   |              |
                    ––––––––––––––––                       
––––––––––––––––
|  More stuff  |
|              |
–––––––––––––––– 

which is quite far from this pretty picture i have in my mind:

–––––––––––––––––   ––––––––––––––––– 
| Lots of stuff |   |   Less stuff  |
|               |   ––––––––––––––––– 
|               |
|               |
–––––––––––––––––
–––––––––––––––––   ––––––––––––––––– 
|    Whooa!     |   |  More stuff   |
|               |   |               |
–––––––––––––––––   ––––––––––––––––– 

Easy solution would be to give these divs an minimum height but that is not really an option in this case.

Please help!

edit: added fiddle http://bootply.com/81952

Answer 1

The Bootstrap 3 way is as follows:

In between your second and third div, add the following bit of HTML:

<div class="clearfix visible-sm"></div>

See working example here: http://bootply.com/81970.

Documation here: http://getbootstrap.com/css/#grid-responsive-resets