Бутстрап-столбцы с flexbox не занимают должной ширины на iOS и Safari

Я пытаюсь использовать flex box со столбцами начальной загрузки, чтобы все столбцы всегда были центрированы по горизонтали. Разметка, упомянутая ниже, отлично работает для Firefox, Chrome и Android, но не работает на iOS и Safari. Я еще не проверял IE.

HTML:

<!-- The fourth column falls down -->
<div class='row row-1 text-center'>
    <div class="col-xs-3 red">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
</div>
<!-- Works Fine and centers the columns -->  
<div class='row text-center'>
    <div class="col-xs-3 red">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
</div>

CSS:

.row {
    display: flex;
    display: -webkit-flex; 
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;
}
div[class^=col-] {
  float: none;  
  display: inline-block;
  vertical-align: top;
}

На Chrome, Firefox и Android

На Safari и iOS

JSFIDDLE

Есть ли что-нибудь, что я должен добавить к столбцам, чтобы они отображались в одной строке.

Ответ 1