Bootstrap columns not floating/wrapping onto next row with flex-box
<p>I am trying to make the bootstrap columns of same height using several approaches that I found over <a href="https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height">here</a>. Everywhere it is working perfectly except the safari on mac, where all the columns stack up in the first row instead of floating to the next one.
here is the HTML:</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-4 col-sm-4 col-xs-6 text-center"&gt;

        &lt;div class="product_card"&gt;
            &lt;a href="/buy/handsome-cream-3-pc-jodhpuri-suit"&gt;&lt;img alt="Handsome Cream 3 Pc Jodhpuri Suit"
                                                                  src="/system/images/attachments/000/000/174/normal/open-uri20160927-22035-h7grcj?1474996752"&gt;&lt;/a&gt;
            &lt;div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;"&gt;
                &lt;i class="fa fa-star-o" aria-hidden="true"&gt;&lt;/i&gt; Shortlist
            &lt;/div&gt;

            &lt;a class="caption" href="/buy/handsome-cream-3-pc-jodhpuri-suit"&gt;
                &lt;h3&gt;Handsome Cream 3 Pc Jodhpuri Suit&lt;/h3&gt;
                &lt;span class="price"&gt;$380.00&lt;/span&gt;
            &lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>here is the CSS that is being used:</p>

<pre><code>.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    &amp;&gt; [class*='col-'] {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }
  }
</code></pre>

<p>here is the screenshots on MAC SAFARI:
<a href="https://i.stack.imgur.com/GdnfM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GdnfM.png" alt="macSafari"></a></p>

<p>here is the screenshots on Ubuntu Chrome:
<a href="https://i.stack.imgur.com/nyLQx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nyLQx.png" alt="linuxChrome"></a></p>

<p>Why is safari goofing up with my col-mds? How to fix this without using JS?</p>