对齐来自不同列的div - Twitter引导程序

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）AND（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>