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:
<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 when I try to do the same thing now I can’t get it to work.
This is the code snippet of the code I am trying to add this functionality to:
<!-- 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 -->
2
Answers
You can use Bootstrap ordering classes. If you use the order classes you can change the order of the columns based on the screen size.
UPDATE: I removed the order-sm-1 and order-sm-2 classes and replaced them with order-sm-first for the Mission section
Example within your code:
You can find some more information about it here https://getbootstrap.com/docs/5.0/utilities/position/#order
Apply column ordering to the large screen layout
This is an interesting problem as the Bootstrap column ordering classes don’t seem to work as expected (at least with this layout) when applied to the small screen breakpoint.
The workaround was to rearrange the html so that the image is in the first column and the text in the last. This way the default layout is for mobile.
And this allow us to apply the column ordering class to the large screen breakpoint using
order-lg-2. This works as expected and moves the image to the last column.Large screen layout:
Small screen layout: text slides below images
The basic html:
The image is in the first column, but reordered on large screens. The
col-sm-12is probably extraneous, but was in the original.Code Snippet
Run the snippet and then click the Full page link at the top. Resize the browser window to hit the small screen breakpoint (576px).