具有不同高度移动与桌面模式的bootstrap推/拉柱

Question

我需要有关Bootstrap的推/拉列功能的帮助。

我有3个不同的部分，都可以可变高度。

在移动模式下，它们必须从1到3垂直显示，这很容易做到。

问题在于我想在桌面模式下获得的布局。我对桌面的需求是将它们显示在2个单独的列中（每个列50％，使用col-md-6）。在左侧我想要第2部分，在右侧我想要第1-3部分。

手机：

第1节

第2节

第3节

桌面：

第2节第1节

没什么..第3节

我的问题是当第2节的高度高于第1节的高度时，第3节位置本身低于第2节（即使显示在右侧）。无论第2节的高度是多少，我的需要是将第3节放在第1节的下方。

感谢您提供的任何帮助。

以下是代码：

<div class="row">

    <div class="col-md-6 col-md-push-6">
        Section 1
    </div>

    <div class="col-md-6 col-md-pull-6">
        Section 2
        <br />
        is taller than Section 1 with this 2nd line
    </div>

    <div class="col-md-6 col-md-push-6">
        Section 3 doesn't start right under Section 1
    </div>

</div>