I am attempting to display my formdata (including text and an image) on the screen using bootstrap in a way that arranges the blocks of data (text + image) next to each other instead of one below the other. I have tried adjusting column sizes, but have been unsuccessful so far. Currently, all containers are stacked vertically on a large screen. The layout looks good on a small screen, but does not transition correctly to utilize the remaining columns on a larger screen
<div class="container-fluid">
<h1 class="my-4 text-center text-lg-left">Thumbnail Gallery</h1>
{% block content %}
{% for contexts in context %}
<div class="col-lg-auto col-lg-auto col-6-auto">
<h2>Title: {{ contexts.title }}</h2>
<p>Category: {{ contexts.category }}</p></div>
<p>Description: {{ contexts.description }}</p>
<p>Price: {{ contexts.price }}</p>
<p>Created: {{ contexts.created }}</p>
<img class="img-fluid img-thumbnail" src="{{contexts.document.url}}" width="20%" height="20%"/>
</div>
{% endfor %}
</div>