Need dynamic rows inside bootstrap 4 - html

Question

I am having a hard time understanding how to set up my bootstrap rows /columns to align like the picture shown. I have tried columns nested in rows and vise versa with no luck.
The yellow and green parts in the photo are added dynamically. There could be 1 or 10 but I want the formatting to be consistent. (using Django) bootstrap formatting example
<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

Something like this should work:
<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>