How can I make Bootstrap 5 grids responsive to smartphones? - html

Question

I have a projects section part of my portfolio. I alternate between description on left/image on right to image on left/description on right. I have been painstakingly trying to make this responsive, but I cannot think of what to do to fix this. I want the image on top and the text below on every project when viewed on a smartphone.
This is the HTML for the projects section:
<section id="projects">
<div class="container">
<div class="row projects">
<h1>My Projects</h1>
<div class="col project-desc-left">
<h2>Tindog</h2>
<p>An landing page for the Tindog app. A twist on a typical dating app. Created with Bootstrap 5 and HTML/CSS utilizing Bootstrap grids.</p>
<i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> <i class="fab fa-bootstrap"></i><br>
<a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/TinDog-WebDevBootcamp/" role="button" target="_blank">Live Site</a>
<a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/TinDog-WebDevBootcamp" role="button" target="_blank">Github Repo</a> </div>
<div class="col col-lg-6 col-sm-12 project-img-right">
<img class="project-img" src="assets/tindog.png"/>
</div>
</div>
<div class="row projects">
<div class="col">
<img class="project-img" src="assets/nftcard.png"/>
</div>
<div class="col project-desc-right">
<h2>NFT Preview Card</h2>
<p>An preview card page created with HTML/CSS.</p>
<i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> <br>
<a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/nft-preview-card-component-main/" role="button" target="_blank">Live Site</a>
<a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/nft-preview-card-component-main" role="button" target="_blank">Github Repo</a> </div>
</div>
<div class="row projects">
<div class="col project-desc-left">
<h2>3-Card Column</h2>
<p>A preview card of vehicle options created with HTML/CSS.</p>
<i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> </i><br>
<a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/3-column-preview-card-component-main/" role="button" target="_blank">Live Site</a>
<a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/3-column-preview-card-component-main" role="button" target="_blank">Github Repo</a>
</div>
<div class="col project-img-right">
<img class="project-img" src="assets/3colcard.png"/>
</div>
</div>
</div>
</section>
I used Bootstrap 5 and I tried to use col-xs-12 but it didn't look right and it also completely messed up the desktop view. The laptop view looks exactly how I want it to look, it's just every other sizing that it completely wrong.
This is the CSS:
/* Projects */
#projects {
width: 100%;
}
#projects h1 {
text-align: center;
}
.projects {
margin-left: 0;
}
.project-img{
width: 300px;
}
.project-desc-left {
margin: 5rem;
width: 320px;
}
.project-desc-right {
}
}
I have been trying to tweak the code for days, but I have barely made any progress.
This is the laptop view of the projects section
This is the mobile view of the projects section

Answer 1

You should be able to do it using Bootstrap 5 Column Ordering without adding any extra CSS. You can add these classes to your Col's and they will appear on the page in the order given no matter their physical place in your HTML.
General useage.
.order-1
.order-2
.order-3
.order-4
.order-5
Ordering according to screen size. In this exammple, the Column will show 1st on SM screens, it will show second on MD screens and third on LG screens.
.order-sm-1
.order-md-2
.order-lg-3 etc etc etc
You can also specify items to be unordered or ordered-first and ordered-last. Here are the docs for everything here....
https://getbootstrap.com/docs/5.0/layout/columns/#order-classes