<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