How to bootstrap 4 col-xx-xx inside another div?

Question

Bootstrap

There is this code:

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

It is expected that the blocks will stand next to each other and it was so in bootstrap3, but in the 4th blocks stand one under the other, even if you crack. If you remove the wrapper div, they stand up correctly. Google - nothing!

Answer 1

Everything works correctly, study the flexes.
.rowcontains appropriately when your html wrapper outer div becomes a flex element classes like .col inside have properties that allow them to position themselves inside a flex container. If you need a grid within a grid add the .row class to the inner div and it will work display: flex,