My title may not be clear, but let me explain. I have a list of blog posts that I want to display next to each other using a for loop. However, they are currently displaying in a vertical layout which is not what I want. You can see how it looks currently in this image: this is how it is in the picture, and this is how I would like them to look like in a picture: {this is how I want them to look like in a picture}.
blog.html
<section class="ftco-section bg-light" id="blog-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-5">
<div class="col-md-10 heading-section text-center ftco-animate">
<h2 class="mb-4">Get Every Single Update Here</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
</div>
</div>
<div class="row justify-content-center mb-5 pb-5">
<div class="col-md-4 ftco-animate">
{% for blog in blog_post %}
<div class="blog-entry ">
<a href="blog-single.html" class="block-20" style="background-image: url({{ blog.thumbnail.url }})">
</a>
<div class="text d-block">
<div class="meta mb-3">
<div><a href="#">{{ blog.timestamp|timesince }} ago</a></div>
<div><a href="#">{{ blog.user }}</a></div>
<div><a href="#" class="meta-chat"><span class="icon-eye"></span>{{ blog.view_count }}</a></div>
</div>
<h3 class="heading"><a href="#">{{ blog.title }}</a></h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p><a href="blog-single.html" class="btn btn-primary py-2 px-3">Read more</a></p>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>