Евгений Мартьянов

У меня нет такой проблемы, хотя ноуту поболее будет. С флексом должны были решить - было удлинение на 2мм. Похоже на частный случай. Поскольку ноуту нет года - свозить на гарантию - пусть проверят и скажут что да и как

<div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-3" style="margin-bottom: 30px">
          содержимое
        </div>
        <div class="col-3" style="margin-bottom: 30px">
          содержимое
        </div>
        <div class="col-3" style="margin-bottom: 30px">
          содержимое
        </div>
        <div class="col-3" style="margin-bottom: 30px">
          содержимое
        </div>
      </div>
    </div>
</div>

В этом примере у вас ничего не должно становится друг под друга.

col-1, col-2, col-3, col-..12 - используется при разрешениях < 576. то есть при всех разрешениях эти блоки будут стоять 4 в ряд и не будут переносится на новую строку.

Причины:
Скорей всего если вы собирали css из scss самостоятельно то возможно вы не учли вендорные префиксы -webkit- и по этому не работает ничего на ios. нужно включить autoprefixer.
Или
Возможно вы подключили не все стили bootstrap 4 или у вас перетираются стили.

https://getbootstrap.com/docs/4.3/layout/grid/

Пример всё что больше 576 будут идти в ряд, при меньшем разрешении они будут становится стеком(друг под друга).
mb-4 mb-sm-0 - это отступы(margin-bottom) https://getbootstrap.com/docs/4.3/utilities/spacing/

<div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-sm-3 mb-4 mb-sm-0">
          содержимое
        </div>
        <div class="col-sm-3 mb-4 mb-sm-0">
          содержимое
        </div>
        <div class="col-sm-3 mb-4 mb-sm-0">
          содержимое
        </div>
        <div class="col-sm-3">
          содержимое
        </div>
      </div>
    </div>
</div>

и к стати float: left - тут вообще не должен работать, bootstrap использует flex