How to get items stacked in a row together in a column thats col-3

I am trying to stack all the items under one another if there is more than one. I am using Django and currently its reproducing a new col-3 for each new item. I have tried bootstrap d-flex flex-wrap, however this is not working.

<div class="col-12 col-lg-6">
            <p>Order History</p>
            {% for order in orders %}
            <div class="row">
                <div class="col-3">
                    <p>Date:</p>
                </div>
                <div class="col-3">
                    <p>Grand Total:</p>
                </div>
                <div class="col-3">
                    <p>Order Number:</p>
                </div>
                <div class="col-3">
                    <p>Items:</p>
                </div>
            </div>
            <div>
                <div class="row">
                    <div class="col-3">
                        <p><strong>{{ order.date }}</strong></p>
                    </div>
                    <div class="col-3">
                        <p><strong>&euro;{{ order.grand_total | floatformat:2 }}</strong></p>
                    </div>
                    <div class="col-3">
                        <a href="{% url 'order_history' order.order_number %}" title="{{ order.order_number }}">
                            {{ order.order_number|truncatechars:8 }}
                        </a>
                    </div>
                    {% for item in order.lineitems.all %}
                    <div class="col-3">
                        <p><strong>{{ item.product.name }} x
                                {{ item.quantity }}</strong></p>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
        </div>

The picture contains the current output. What I am trying to achieve is a list of items under each other. Order History

<div class="col-3">
{% for item in order.lineitems.all %}
<p><strong>{{ item.product.name }} x
{{ item.quantity }}</strong></p>
{% endfor %}
</div>

solved the issue.

Back to Top