Html Boostrap栅格-删除垂直空白空间

我当前的布局如下所示：

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

在phone/tablet中，我希望列的堆叠方式如下：（从col-md-8开始）

我有一个大问题，同一类的列没有垂直堆叠。相反，他们留下了一个很大的“空白”

我使用以下CSS修复了此问题：

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

-立柱现在完全按照我的要求堆叠

但是，如果

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

我希望具有相同类的列垂直堆叠，而不考虑高度。栏目还必须根据其内部的“内容”数量动态调整其高度，因为这是无法预测的。我不能有固定高度的柱子

所需输出的Photoshop图像。

我已尝试更改列的顺序，因此将

col-md-4

放在第一位，这将修复它-请参阅。但在手机/平板电脑中，它们的堆叠顺序是错误的（从

col-md-4

开始），如果

col-md-4

越长，它就会把事情搞得一团糟

---

有人知道如何解决这个问题吗

坚持第一个，并在任一列的大内容后添加

。例如，像这样

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

1.洛勒姆
关于Lorem Ipsum的参考网站，提供关于其起源的信息，以及一个随机Lipsum生成器。关于Lorem Ipsum的参考网站，提供关于其起源的信息，以及一个随机Lipsum生成器。
3.乱数假文
关于Lorem Ipsum的参考网站，提供关于其起源的信息，以及一个随机Lipsum生成器。关于Lorem Ipsum的参考网站，提供关于其起源的信息，以及一个随机Lipsum生成器。关于Lorem Ipsum的参考网站，提供关于其起源的信息，以及一个随机Lipsum生成器。
5.多奈克效率
关于Lorem Ipsum的参考网站，提供关于其起源的信息，以及一个随机Lipsum生成器。
7.同侧阴唇

谢谢您的回答。看这里：它似乎没什么作用？嘿，试试这个谢谢你花时间。在我的旧解决方案上编辑并添加了一些颜色：-将相同的样式应用于您的解决方案：您的解决方案实际上比我的解决方案有更多的“垂直空间”。我希望这些列彼此垂直对齐。完全没有垂直空间。你必须注意，div的高度随着内容的增加而增加。如果希望两个柱的高度相等，则必须使用固定高度。对于col-md-8和col-md-4或类似物，使用单独的高度。谢谢问题是这些“盒子”中的内容不是固定的，而是根据你访问的网页的不同而有所不同。因此，我不能有一个固定的高度，高度必须是动态的。与jsfiddle.net/vdexv26g/23完全相同-尽管当

col-md-8

高于

.col-md-4

时，这不起作用（这就是我试图解决的问题）。我只是更新了我的问题，更好地解释了它。

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