Bootstrap Grid - 删除垂直空白区域

Question

我目前的布局如下：

<div class="container">
    <div class="row">
        <div class="col-md-8">1. Lorem</div>
        <div class="col-md-4">2. Sollicitudin</div>
        <div class="col-md-8">3. Lorem ipsum</div>
        <div class="col-md-4">4. Pellentesque</div>
        <div class="col-md-8">5. Donec efficitur</div>
        <div class="col-md-4">6. Donec efficitur</div>
        <div class="col-md-8">7. Lorem ipsum dolor</div>
    </div>
</div>

在桌面模式下，我希望列堆叠如下：

col-md-8    col-md-4
col-md-8    col-md-4
col-md-8    col-md-4
col-md-8    col-md-4

在手机/​​平板电脑中，我希望列堆叠如下：（从col-md-8开始）

col-md-8
col-md-4
col-md-8
col-md-4
col-md-8
col-md-4
col-md-8
col-md-4

我遇到了一个大问题，具有相同类的列不是垂直堆叠的。相反，他们正在遗漏一个空旷的空间＆＃34;。 See fiddle of the empty space here

我用以下CSS解决了这个问题：

@media (min-width: 992px) {
    .col-md-4 {
        float: right;
    }
}

See fiddle updated with new css - 列正在按照我的意愿完全堆叠 ！

但是，如果col-md-8比相应的col-md-4长，我会遇到与以前相同的问题，请参阅fiddle with same css as before, but with vertical empty space。

期望的输出：

我希望具有相同类的列无论高度如何都垂直堆叠。列还必须根据＆＃34;内容的数量动态调整其高度＆＃34;它在里面，因为这是无法预测的。我不能拥有固定高度的列。

所需输出的Photoshop图像。

我尝试更改列的顺序，因此col-md-4首先出现，这会修复它 - 请参阅fiddle with updated column order。但是在移动设备/平板电脑中，它们的排列顺序错误（从col-md-4开始），如果col-md-4更长，它会像see fiddle of this一样混乱。

有谁知道如何解决这个问题？

Answer 1

坚持使用第一个，并在任一列的大内容之后添加<div style="clear:none;"></div>。对于例如像这样

    <div class="container">
    <div class="row">
        <div class="col-md-8">1. Lorem</div>
        <div class="col-md-4">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator. Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
<div style="clear:none;"></div>
        <div class="col-md-8">3. Lorem ipsum</div>
        <div class="col-md-4">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator. Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator. Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
<div style="clear:none;"></div>
        <div class="col-md-8">5. Donec efficitur</div>
        <div class="col-md-4">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
<div style="clear:none;"></div>
        <div class="col-md-8">7. Lorem ipsum dolor</div>
    </div>
</div>