*Here is the code. With this code listing is done vertically.Here is the current output I want to make this vertically.

*This is the current code I written.

    {% extends 'index.html' %}
{%block body_block%}

{%for p in carslist%}
<section >
    <div >
        <div >
            <div >
                <div >
                    <!-- Product image-->
                    <img  src="{{p.carpic.url}}" alt="..." />
                    <!-- Product details-->
                    <div >
                        <div >
                            <!-- Product name-->
                            <h5 >{{p.carcompany}}</h5>
                            <p>{{p.carmodel}}</p>
                            <!-- Product price-->
                        </div>
                        <ul >
                            <li >Price: {{p.carprice}}</li>
                            <li >Kms: {{p.carkms}}</li>
                          </ul>
                    </div>
                    <!-- Product actions-->
                    <div >
                        <div ><a  href="#">View Details</a></div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>
{%endfor%}

CodePudding user response：

For the parent element of each of your products, you need to write the properties: display: flex; flex direction: row; flex-wrap: wrap;

In tailwind - flex flex-row flex-wrap

CodePudding user response：

simply remove all the row-cols classes and things should stack up vertically by default.

Classes to remove: row-cols-2 row-cols-md-3 row-cols-xl-4.

When you have a lot of cluttered html like that and you can't make sense of it anymore I find that the best way to go about it is to reduce the structure to the very minimum, and build from there.

Comment your code and rebuild it little step by little step. Then you can see the impact of each individual element or class that you add.