Align divs from different columns - Twitter bootstrap

Question

I am using twitter bootstrap and trying to align two divs that belong to different columns.

The code so far:

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

The above code produces the layout below:

Is there any way to align vertically header4 with header2 (and thus leave space between the end of the div of header3 and the start of the div of header4?

Edit: when I resize my window and make it smaller I want to keep (header1 and header2) AND (header3 and header4) together (ie header2 below header1). This is the current case in the provided html code.

Thank you

Answer 1

There is - you need to alter your HTML so instead of simply having a two column layout, you have a grid based two row two column layout, e.g (simplified)

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