css - Bootstrap 3 在中型设备上换行

Question

我对不同大小的 div 有疑问。我想要和行在中型和大型显示器上显示 3 列宽的 div，在小型设备上显示 6 列宽的 div。

<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>  

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

–––––––––––––––––   –––––––––––––––––   ––––––––––––––––   ––––––––––––––––
| 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 设置一个最小高度，但在这种情况下这并不是一个真正的选择。

请帮忙!

编辑:添加 fiddle http://bootply.com/81952

Answer 1

Bootstrap 3方式如下:

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

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

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

此处的文档:http://getbootstrap.com/css/#grid-responsive-resets