I recently started using Bootstrap 5 to build a new website and I encountered an issue with the layout of my feature and mission sections. I wanted the images to move above the text when the viewport is scaled down to mobile or tablet size, but I wasn't sure how to achieve this effect. On one page of my site, I managed to implement this functionality successfully using the following code snippet:
<div class="col-md col-12 order-1 order-md-0">
<h3 class="display-3 text-start" pt-5>General Support</h3>
<br>
<!-- <br> -->
<p class="text-start">
Sit nisi ipsum sint incididunt qui amet cupidatat quis qui adipisicing excepteur ea consequat consequat. Anim qui non ex labore enim non Lorem. Sint sint consectetur magna quis proident anim. Ipsum dolor voluptate do veniam exercitation mollit quis adipisicing commodo labore voluptate cupidatat aliquip. Sint sit culpa nostrud laboris voluptate Lorem cupidatat.
<br />
<br />
Proident deserunt nulla aliquip sint dolor. Labore qui quis cillum deserunt voluptate et nostrud et elit reprehenderit. Deserunt aliqua sint esse elit proident do excepteur proident anim. Adipisicing magna magna ullamco do ea in consectetur aliqua aliquip sint excepteur ex. Reprehenderit magna officia adipisicing exercitation qui sint amet fugiat et ipsum amet velit consectetur commodo. Eu duis laboris eiusmod ad quis ut voluptate. Nisi amet quis do laborum occaecat non mollit sunt.
<br />
<br />
Culpa laborum occaecat exercitation deserunt nulla laboris est. Aliqua culpa et qui non mollit cupidatat excepteur. Labore ea ipsum sit est ipsum commodo velit adipisicing culpa aute et nostrud laboris. In ex velit proident veniam nostrud tempor duis ut sint.
</p>
<br />
<div class="d-grid col-6 mx-auto mb-4 text-start">
<a href="./ticket-form">
<button class="btn btn-primary" type="button" id="button">Submit a Ticket</button>
</a>
</div>
</div>
However, I am now facing challenges replicating the same functionality on another section of my site. Here is the snippet of code where I am trying to implement this feature:
<!-- FEATURE SECTION START -->
<section>
<div class="container">
<div class="row bg-white mt-1 px-2">
<div class="col-lg-6 col-sm-12">
<img src="./src/img/feature-section.jpeg" alt=" logo" class=" img-fluid rounded float-start mb-2 img-fluid mt-1" id="#team-img">
</div>
<div class="col-lg-6 col-sm-12">
<h2 class="display-6" id="about-heading">About Us</h2>
<hr>
<p class="lead mt-5">
Aliqua esse eiusmod culpa dolore ea Lorem do labore labore proident nisi. Do labore sunt veniam Lorem veniam dolor fugiat fugiat excepteur amet officia ipsum velit. Proident ullamco sint magna nisi in sunt veniam qui sit. Fugiat est ullamco sint commodo officia nostrud dolore. Dolor pariatur mollit mollit veniam occaecat magna pariatur et cillum culpa laboris. Magna qui est aute quis veniam exercitation elit cillum eiusmod.
</p>
<a href="./about#about" class="btn btn-primary mt-3" id="button">Read More</a>
</div>
</div>
</div>
</section>
<!-- FEATURE SECTION CLOSE -->
<!-- MISSION SECTION START -->
<section>
<div class="container">
<div class="row bg-white pt-5 px-2">
<div class="col-lg-6 col-sm-12">
<h2 class="display-6" id="mission-heading">Our Mission</h2>
<hr>
<p class="lead mt-5">
Occaecat dolore in non magna cupidatat. Aliquip exercitation elit nulla elit sint in elit magna elit culpa nisi commodo fugiat. Dolore laborum cupidatat aliquip velit aliqua officia ipsum eu adipisicing. Qui do ut consectetur magna. Nostrud non irure culpa quis.
</p>
<a href="./about#mission" class="btn btn-primary mt-3 mb-3" id="button">Read More</a>
</div>
<div class="col-lg-6 col-sm-12">
<img src="./src/img/team-section002.jpeg" alt=" logo" class="img-fluid mb-2 img-fluid rounded float-start" id="#team-img">
</div>
</div>
</div>
</section>
<!-- MISSION SECTION CLOSE -->