html - 对齐来自不同列的 div - Twitter bootstrap

Question

我正在使用 Twitter Bootstrap 并尝试对齐属于不同列的两个 div。

到目前为止的代码:

<div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <h2>header1</h2>
                    <div class="row">
                        <div class="col-md-2">
                            1
                        </div>
                        <div class="col-md-4">
                            2
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            1
                        </div>
                        <div class="col-md-4">
                            2
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            1
                        </div>
                        <div class="col-md-4">
                            2
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            1
                        </div>
                        <div class="col-md-4">
                            2
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            1
                        </div>
                        <div class="col-md-4">
                            2
                        </div>
                    </div>
                    <h2>header2</h2>
                    <div class="row">
                        <div class="col-md-2">
                            3
                        </div>
                        <div class="col-md-4">
                            4
                        </div>
                    </div>

                </div>
                <div class="col-md-6">
                    <h2>header3</h2>
                    <div class="row">
                        <div class="col-md-2">
                            3
                        </div>
                        <div class="col-md-4">
                            4
                        </div>
                    </div>

                    <h2>header4</h2>
                    <div class="row">
                        <div class="col-md-2">
                            3
                        </div>
                        <div class="col-md-4">
                            4
                        </div>
                    </div>
                </div>
            </div>
        </div>

上面的代码产生了下面的布局:

有什么方法可以使 header4 与 header2 垂直对齐(从而在 header3 的 div 结尾和 header4 的 div 开头之间留出空间？

编辑:当我调整窗口大小时使其变小时，我想将 (header1 和 header2) 和 (header3 和 header4) 放在一起(即 header1 下面的 header2)。这是提供的 html 代码中的当前情况。

谢谢

Answer 1

有 - 你需要改变你的 HTML 所以你有一个基于网格的两行两列布局而不是简单的两列布局，例如(简化)

<div class='row'>
    <div class='col-md-6'>
        <h1>Header 1</h1>
    </div>
    <div class='col-md-6'>
        <h1>Header 3</h1>
    </div>
</div>
<div class='row'>
    <div class='col-md-6'>
        <h1>Header 2</h1>
    </div>
    <div class='col-md-6'>
        <h1>Header 4</h1>
    </div>
</div>