Align divs from different columns - Twitter bootstrap - html

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>