Bootstrap 3 on Apple flex block width slides out - why?

Question

Flexbox

The site is on bootstrap 3. But sometimes you need to apply vertical alignments, which is easy with flex. But all Apple devices have this problem.

.row.flex {
  display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

<div class="row flex">
  <div class="col-xs-6 ">
    Первая колонкаПервая колонкаПервая колонкаПервая колонка
  </div>
  <div class="col-xs-6 ">
    Вторая колонкаВторая колонкаВторая колонка
  </div>
  <div class="col-xs-6 ">
    Третья колонкаТретья колонкаТретья колонкаТретья колонка
  </div>
  <div class="col-xs-6 ">
    Четвертая колонкаЧетвертая колонкаЧетвертая колонка
  </div>
  <div class="col-xs-6 ">
    Пятая колонкаПятая колонкаПятая колонка
  </div>
</div>

And on Apple it is displayed like this:
The second column should be on the right.
If I add this style, then everything gets up in 2 columns normally.

.row.flex .col-xs-6 {
    -ms-flex: 0 0 49%;
    flex: 0 0 49%;
    max-width: 49%;
}

Why is this happening? On bootstrap 4 this works fine. Where do you need to fix?