Bootstrap 3 - col-md-4 到 col-sm-6，或 3x2 到 2x3 的网格

Question

如何将 3x2 的网格更改为 2x3，而不会出现空的 space 一行结束另一行开始？

例如：

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

这就是我想要实现的：

这个：

为此：

但是我得到的是：

Answer 1

只需将它们全部放在一行中 - 它会自动结束。

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

JSFiddle

Answer 2

将它们全部排成一排。参见 this bootply

喜欢：

<div class="row"> 
     <div class="col-md-4 col-sm-6">
        <span class="box">content</span>
    </div>
    <div class="col-md-4 col-sm-6">
      <span class="box">content</span>
    </div>
    <div class="col-md-4 col-sm-6">
        <span class="box">content</span>
    </div>

    <div class="col-md-4 col-sm-6">
        <span class="box">content</span>
    </div>
    <div class="col-md-4 col-sm-6">
        <span class="box">content</span>
    </div>
    <div class="col-md-4 col-sm-6">
        <span class="box">content</span>
    </div>
</div>

Bootstrap 3 - col-md-4 到 col-sm-6，或 3x2 到 2x3 的网格

Boostrap 3 - col-md-4 to col-sm-6, or grid of 3x2 to 2x3

css

grid

layout

twitter-bootstrap

twitter-bootstrap-3