title: Bootstrap 3 row breaks on medium devices
body: <p>I have a problem with differently sized divs. I'd like to have and row that displays 3 column wide divs on medium &amp; large displays and 6 column wide divs on small devices.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="service col-sm-6 col-md-3"&gt;Lots of stuff&lt;/div&gt;
      &lt;div class="service col-sm-6 col-md-3"&gt;Less stuff&lt;/div&gt;
      &lt;div class="service col-sm-6 col-md-3"&gt;Whooa!&lt;/div&gt;
      &lt;div class="service col-sm-6 col-md-3"&gt;More stuff&lt;/div&gt;
  &lt;/div&gt;  
  &lt;/div&gt;  
  </code></pre>
  
  <p>on medium &amp; large displays this looks like:</p>
  
  <pre><code>–––––––––––––––––   –––––––––––––––––   ––––––––––––––––   ––––––––––––––––
  | Lots of stuff |   |   Less stuff  |   |   Whooa!     |   |  More stuff  |
  |               |   –––––––––––––––––   |              |   |              |
  |               |                       ––––––––––––––––   ––––––––––––––––
  |               |
  –––––––––––––––––
  </code></pre>
  
  <p>which is just great. but on small displays it looks like:</p>
  
  <pre><code>–––––––––––––––––   ––––––––––––––––– 
  | Lots of stuff |   |   Less stuff  |
  |               |   ––––––––––––––––– 
  |               |   ––––––––––––––––
  |               |   |    Whooa!    |
  –––––––––––––––––   |              |
                      ––––––––––––––––                       
  ––––––––––––––––
  |  More stuff  |
  |              |
  –––––––––––––––– 
  </code></pre>
  
  <p>which is quite far from this pretty picture i have in my mind:</p>
  
  <pre><code>–––––––––––––––––   ––––––––––––––––– 
  | Lots of stuff |   |   Less stuff  |
  |               |   ––––––––––––––––– 
  |               |
  |               |
  –––––––––––––––––
  –––––––––––––––––   ––––––––––––––––– 
  |    Whooa!     |   |  More stuff   |
  |               |   |               |
  –––––––––––––––––   ––––––––––––––––– 
  </code></pre>
  
  <p>Easy solution would be to give these divs an minimum height but that is not really an option in this case.</p>
  
  <p>Please help!</p>
  
  <p>edit: added fiddle <a href="http://bootply.com/81952" rel="nofollow">http://bootply.com/81952</a></p>