Bootstrap 3 Flexbox модификация не работает в Safari

Question

У меня есть сайт, созданный на Bootstrap 3. Я создал собственный класс строк для добавления flexbox к макету, но в Safari он работает неправильно.

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
  .row-eq-height > [class*='col-'] {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row row-eq-height">
    <div class="col-xs-6">
      This should be on the left
    </div>
    <div class="col-xs-6">
      This should be on the right
    </div>
  </div>
</div>

Есть идеи, что здесь происходит?