Нужны динамики c ряды внутри bootstrap 4

Question

Мне трудно понять, как настроить мои bootstrap строки / столбцы для выравнивания, как показано на рисунке. Я пробовал столбцы, вложенные в строки, и наоборот, безуспешно.

Желтая и зеленая части на фотографии добавляются динамически. Их может быть 1 или 10, но я хочу, чтобы форматирование было согласованным. (с использованием Django) bootstrap пример форматирования

<div class="container">
<div class="col-2">
    <div class="card card-body">
        <br>
        <!--{% for object in business %}-->
        <div style="text-align:center"><img src="{{ object.logo.url }}" alt="Card image cap" width="90" height="90"></div>
        <br>
        <h5 style="text-align:center;">{{ object.name }}</h5>
        <!--{% endfor %}-->
        <!--{% if user.is_authenticated %}-->
        <h6 style="text-align:center;">{{ user.username }}</h6>
        <!--{% endif %}-->
        <p style="text-align:center;">Ratings go here</p>
        <br>
    </div>
</div>

<div class="col-10">
    <div class="row">
        <!--{% if service %}-->
        <!--{% for services in service %}-->
        <div class="col-4">
            <div class="card" style="width: 18rem;" href="">

                <img class="card-img-top" src="{{ services.cover_image.url }}" alt="{% static 'images\default_cover.jpg' %}" >
    
                <div class="card-body">
                  <p class="card-text">{{ services.description }}</p>
                </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">(Rating goes here)</li>
    
                        <li class="list-group-item">Starting at: ${{ services.price }} </li>
                    </ul>
            </div>

        </div>
        <!--{% endfor %}-->
        <!--{% endif %}-->
    </div>
</div>

Answer 1

Примерно так должно работать:

<div class="container">
    <div class="col-2">left column</div>
    <div class="col-10">
        <div class="row">
            <div class="col-4">three elements per row</div>
            <div class="col-4">three elements per row</div>
            <div class="col-4">three elements per row</div>
        </div>
        <div class="row">
            <div class="col-12">one element per row</div>
            <div class="col-12">one element per row</div>
            <div class="col-12">one element per row</div>
        </div>
    </div>
</div>