中型设备上的Bootstrap 3行中断

我有不同大小的div的问题.我想拥有和排在中型和大型显示器上显示3列宽div,在小型设备上显示6列宽div.

    
Lots of stuff
    
Less stuff
    
Whooa!
    
More stuff
  
  

在中型和大型显示器上,这看起来像:

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

这很棒.但在小型显示器上看起来像:

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

这与我脑海中的漂亮画面相差甚远:

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

简单的解决方案是给这些div一个最小高度,但在这种情况下这不是一个真正的选择.

请帮忙!

编辑:添加小提琴http://bootply.com/81952

Bootstrap 3方式如下:

在第二个和第三个div之间,添加以下HTML:

请参阅此处的工作示例:http://bootply.com/81970.

这里的文件:http://getbootstrap.com/css/#grid-responsive-resets