Bootstrap grid system same row but different height
<p>I have been experimenting with bootstrap, and I have come across a problem.
I was trying to get a specific layout to work:</p>

<p><a href="https://jsfiddle.net/7e5zh62y/1/" rel="nofollow">https://jsfiddle.net/7e5zh62y/1/</a></p>

<p>Problem is, I can't seem to get <code>header1</code> and <code>header2</code> at the same height. </p>

<p><a href="http://i.imgur.com/Upg24EI.png" rel="nofollow" title="first image">This</a> is what I wanted to achieve, so that when the screen gets smaller, the title and the list <a href="http://i.imgur.com/6jQbwe9.png" rel="nofollow" title="tiny screen">stay grouped.</a></p>

<p>Is this possible to do? I've tried in several ways, but the closest I could get was something like:</p>

<pre><code>    header1
    header2
    list1
    list2
</code></pre>

<p>which doesn't really work out.</p>