Same height for Bootstrap 3 grid columns
<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>