1
I am currently using Bootstrap 5 to develop a website and encountering an issue with getting images to move above text in the feature and mission sections on mobile or tablet screens. Previously, I was able to achieve this effect using the following code snippet on a specific page:
<div class="col-md col-12 order-1 order-md-0">
<h3 class="display-3 text-start" pt-5>General Support</h3>
<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...
</div>
</div>
However, I am now struggling to replicate this functionality on another part of my website.
Below is the code snippet where I am trying to add the moving image functionality:
<!-- FEATURE SECTION START -->
<section>
<div class="container">
<div class="row bg-white mt-1 px-2">
<div class="col-lg-6 col-sm-12 order-sm-1">
<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 order-sm-2">
<h2 class="display-6" id="about-heading">About Us</h2>
<hr>
<p class="lead mt-5">
Ullamco nostrud ipsum laboris sint commodo. Do duis veniam culpa tempor veniam laboris dolor amet minim qui incididunt ipsum. Magna proident commodo ea do eiusmod amet cu...
</p>
<a href="./about#about" class="btn btn-primary mt-3" id="button">Read More</a>
</div>
</div>
</div>
</se...</questionbody>
<exquestionbody>
<div class="question">
<p>1</p>
<p>I am using Bootstrap 5 to create a website and in my feature and mission sections I want the images to move above the text when the viewport is mobile or tablet size, but I am not sure how to accomplish this. For example, on one page of my site, I did this to achieve the same functionality mentioned above:</p>
<pre><code><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 proi...
</div>
</div>
</section>
<!-- FEATURE SECTION CLOSE -->
<!-- MISSION SECTION START -->
<section>
<div class="container"...