Bootstrap 4 решает проблему сафари

Question

Я пытаюсь найти лучший обходной путь для проблемы с сеткой в ​​старых версиях Safari, потому что любая из них, которую я нашел, не работает для меня.

Проблема в том, что сетка начальной загрузки работает неправильно.В моем проекте у меня есть простой код:

 <div class="container">
  <div class="row">
    <div class="col-lg-4">
      1 col
    </div>
    <div class="col-lg-4">
      2 col
    </div>
    <div class="col-lg-4">
      3 col
    </div>
    <div class="col-lg-4">
      4 col
    </div>
  </div>  
</div>

4-й столбец должен быть перемещен на другую строку, но он находится на той же строке, и это также нарушает ширину тела.

Я пробовал разные решения, но это не работаетдля меня.Только когда я перезаписываю сетку таким образом:

.col-lg-4 {
  display: inline-block !important;
}

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

Я пробовал также с:

.row:before, .row:after {display: none !important;}

и

 .row { width: 100%; }                                                 
 .col { display:inline-block !important; }

но безуспешно.Я тестирую на этом пользовательском агенте:

Mozilla/5.0 (iPad; CPU OS 10_14 like Mac OS X) AppleWebKit/600.1.4(KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

Какой лучший способ для этого?