Boostrap 3 - col-md-4到col-sm-6,或3x2到2x3的网格

MP_*_*bby 3 css grid layout twitter-bootstrap twitter-bootstrap-3

如何在没有空行的情况下将3x2的网格更改为2x3,其中一行结束而另一行开始?

例如:

 <div class="row"> 
     <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
</div>
<div class="row"> 
    <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这就是我想要实现的目标:

这个: 在此输入图像描述

对此: 在此输入图像描述

但相反,我得到了这个:在此输入图像描述

eni*_*gma 7

把它全部放在一行 - 它会自动包裹起来.

 <div class="row"> 
     <div class="col-md-4 col-sm-6">
        content 1
    </div>
    <div class="col-md-4 col-sm-6">
        content 2
    </div>
    <div class="col-md-4 col-sm-6">
        content 3
    </div>
    <div class="col-md-4 col-sm-6">
        content 4
    </div>
    <div class="col-md-4 col-sm-6">
        content 5
    </div>
    <div class="col-md-4 col-sm-6">
        content 6
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

的jsfiddle