title: Same height for Bootstrap 3 grid columns
body: <h1>What I have</h1>
  
  <p>I have some Bootstrap 3 Grid columns with different heights:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-4"&gt;Item 1&lt;/div&gt;
    &lt;div class="col-xs-4"&gt;Item 2 &lt;br/&gt; additional line
    &lt;/div&gt;
    &lt;div class="col-xs-4"&gt;Item 3&lt;/div&gt;
    &lt;div class="col-xs-6"&gt;Item 4 - This should be on a separate line&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/M75Xe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M75Xe.png" alt="Bootstrap only style"></a></p>
  
  <h1>What I want</h1>
  
  <p>I want to add an additional class (e.g. <code>.row-aligned</code>) to <code>.row</code> to achieve that all abreast "cols" have the same height.</p>
  
  <p>Which should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/bqwv0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bqwv0.png" alt="Cols with .row-aligned class"></a></p>
  
  <h1>My attempt</h1>
  
  <p>Because I don't need to support old browsers I can use flexbox.
  My attempt is quiet easy and works in all browsers but not in Safari (version 9.1, Mac OSX 10.10):</p>
  
  <pre><code>.aligned-row {
    display: flex;
    flex-flow: row wrap;
  }
  </code></pre>
  
  <p><em><a href="http://codepen.io/TheSchecke/pen/qZeGMO" rel="noreferrer">I prepared a Demo here.</a></em></p>
  
  <h2>Safari Bug</h2>
  
  <p>As I said, Safari cannot handle this flexbox style and the result looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LcnFJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LcnFJ.png" alt="enter image description here"></a></p>
  
  <p>(I found out that adding <code>margin-left: -1px</code> seems to fix the issue, but it is not a good solution, because it will move everything 1 pixel left which can hide borders or something else.)</p>
  
  <h1>My question</h1>
  
  <p>Do you have any idea how I can fix this bug in Safari? Or do I use flexbox wrong? Or is there a better solution without using flexbox?</p>