title: Align multiple elements across bootstrap columns in the same row
body: <p>I would like to horizontally align multiple items across two columns within the same row in bootstrap. An example HTML Code can be found below:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;h1&gt;Short Heading&lt;/h1&gt;
          &lt;p&gt;Some super long content that will push the button far downward so that it will certainly not align with the next column anymore&lt;/p&gt;
          &lt;button class="btn btn-primary"&gt;Button&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;h1&gt;Super long Heading that requires 2 rows&lt;/h1&gt;
          &lt;p&gt;Some short content&lt;/p&gt;
          &lt;button class="btn btn-primary"&gt;Button&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>or in this fiddle <a href="http://jsfiddle.net/6pYhx/689/" rel="nofollow">http://jsfiddle.net/6pYhx/689/</a> </p>
  
  <p>Within the example, I would like to have 2 conditions</p>
  
  <ol>
  <li>The header, p and button elements should be on the same horizontal height. In my example the right header is two rows, therefore the right p element is one row lower than the left p</li>
  <li>If the screen size shrinks, all elements of column 1 should be right below each other, followed by all elements of column 2 -> I tried to solve it by having multiple rows, but then you'd have header 1, header 2, p 1, p 2, ... Instead I would like to have header 1, p 1, button 1, followed by header 2, p 2, button 2</li>
  </ol>
  
  <p>Any ideas how to solve it with CSS?</p>