Bootstrap columns not floating/wrapping onto next row with flex-box - html

Question

I am trying to make the bootstrap columns of same height using several approaches that I found over here. 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:
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6 text-center">
<div class="product_card">
<a href="/buy/handsome-cream-3-pc-jodhpuri-suit"><img alt="Handsome Cream 3 Pc Jodhpuri Suit"
src="/system/images/attachments/000/000/174/normal/open-uri20160927-22035-h7grcj?1474996752"></a>
<div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;">
<i class="fa fa-star-o" aria-hidden="true"></i> Shortlist
</div>
<a class="caption" href="/buy/handsome-cream-3-pc-jodhpuri-suit">
<h3>Handsome Cream 3 Pc Jodhpuri Suit</h3>
<span class="price">$380.00</span>
</a></div>
</div>
</div>
here is the CSS that is being used:
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
&> [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;
}
}
here is the screenshots on MAC SAFARI:
here is the screenshots on Ubuntu Chrome:
Why is safari goofing up with my col-mds? How to fix this without using JS?

Answer 1

I think the easier way to do it is by setter the height you want in CSS, remove the img tag, and add a background cover image on your first a tag:
.product_card {
height: 300px;
width: 190px;
float: left;
margin: 4px;
}
.product_card a:first-child {
display: block;
height: 100%;
background-image: url('http://i.imgur.com/8YsAmq3.gif');
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
}
.product_card:first-child {
margin-left: 0px;
}
.product_card:last-child {
margin-right: 0px;
}
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6 text-center">
<div class="product_card">
<div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;">
<i class="fa fa-star-o" aria-hidden="true"></i> Shortlist
</div>
<a class="caption" href="/buy/pork">
<h3>Porks</h3>
<span class="price">$380.00</span>
</a></div>
<div class="product_card">
<div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;">
<i class="fa fa-star-o" aria-hidden="true"></i> Shortlist
</div>
<a class="caption" href="/buy/rhinoceros">
<h3>Rhinoceros</h3>
<span class="price">$8 000.00</span>
</a></div>
<div class="product_card">
<div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;">
<i class="fa fa-star-o" aria-hidden="true"></i> Shortlist
</div>
<a class="caption" href="/buy/dog">
<h3>Dogs</h3>
<span class="price">$380.00</span>
</a></div>
</div>
</div>