Как bootstrap 4 col-xx-xx внутри другого div?

Question

[Роман]

Есть такой код:

<div class="row">
    <div>
        <div class="col-xl-3">IMAGE</div>
        <div class="col-xl-9">TEXT</div>
    </div>
</div>

Ожидается что блоки встанут рядом и в bootstrap3 так и было, но в 4-ом блоки встают друг под другом, хоть ты тресни. Если убрать обёрточный div - встают правильно. Гуглил - ничего!

Comments

[Антон Иванов]

Покажите ваш CSS-код. Особенно касаемо класса product.

[Роман]

Антон, нет там никаких стилей, в том-то и дело, проблема в том что если обернуть просто пустым div уже всё съезжает!

[eltorxid]

Посмотри свойства класса .row
Скорее всего он так настроен, что в него должны входить классы .col-

Answer 1

[alvvi]

Все правильно работает, изучите флексы.
.row содержит в себе display: flex, соотвественно при вашем html внешний div-обертка стал флекс эелментом
классы типа .col внутри имеют свойства flex: 0 0 {процент}, которые позволяют им позиционировать себя внутри флекс-контейнера.
Если вам нужна сетка внутри сетки добавьте внутреннему div'у класс .row и все заработает