Bootstrap makes responsive layouts practical because its grid is built around breakpoints and flexible columns. One common requirement is to show two columns side by side on desktop, but reverse their order on mobile. For example, you may want text to appear before an image on large screens while the image appears first on a phone. The reliable way to do this in modern Bootstrap is to use its responsive order utility classes.
TLDR: To switch Bootstrap column order on mobile, use classes such as order-1, order-2, order-md-1, and order-md-2. Bootstrap is mobile first, so unprefixed order classes apply to mobile by default, while breakpoint classes apply from that screen size upward. Keep accessibility in mind because visual order may differ from the HTML source order. In most Bootstrap 4 and Bootstrap 5 projects, responsive order utilities are the cleanest solution.
Understanding the Bootstrap Grid
Bootstrap’s grid system divides a row into columns. In Bootstrap 4 and Bootstrap 5, columns are powered by Flexbox, which means their visual order can be changed without moving the HTML elements themselves. This is exactly what the order utility classes do.
Bootstrap is also mobile first. That means styles without a breakpoint prefix apply to the smallest screens first. Breakpoint-specific classes such as order-md-1 or order-lg-2 then override those styles on medium, large, or larger screens.
For column ordering, this mobile-first behavior is important. If you want a layout to be reversed on mobile but normal on desktop, you usually define the mobile order first, then define the desktop order with a breakpoint class.
The Basic Pattern
Suppose you have a two-column section. On desktop, you want the text on the left and the image on the right. On mobile, you want the image to appear first and the text below it.
The HTML structure might look like this:
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1">
<h2>Product information</h2>
<p>This text appears second on mobile and first on desktop.</p>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="image.jpg" class="img-fluid" alt="Product preview">
</div>
</div>
</div>In this example, the first column has order-2, so it appears second on mobile. It also has order-md-1, so from the medium breakpoint upward it appears first. The second column has the opposite setup: order-1 on mobile and order-md-2 on medium screens and larger.
Why This Works
The key is that Bootstrap’s responsive order utilities apply in layers. The class order-2 applies to all screen sizes unless a more specific responsive rule overrides it. The class order-md-1 applies starting at the medium breakpoint. Therefore, the same element can have one position on mobile and a different position on desktop.
This approach is better than writing custom CSS for most ordinary layouts. It is predictable, easy to read, and consistent with Bootstrap’s design principles. It also keeps the behavior visible directly in the markup, which can help other developers understand the layout quickly.
Common Order Classes
Bootstrap provides several utility classes for controlling order. The exact range may vary slightly depending on the Bootstrap version, but the common pattern is consistent.
order-1,order-2, and similar classes set the order for all screen sizes by default.order-sm-1applies from the small breakpoint upward.order-md-1applies from the medium breakpoint upward.order-lg-1applies from the large breakpoint upward.order-xl-1and, in Bootstrap 5,order-xxl-1apply at larger breakpoints.order-firstandorder-lastcan quickly move an item to the beginning or end.
For precise layouts, numbered order classes are usually clearer than order-first and order-last. Numbered classes make it obvious how multiple columns should behave across different breakpoints.
Example: Marketing Section
A frequent use case is a marketing section where the visual design alternates between text-image and image-text layouts on desktop. On mobile, however, you may want every section to follow the same sequence for readability.
<section class="container py-5">
<div class="row align-items-center">
<div class="col-lg-6 order-2 order-lg-1">
<h2>Built for fast teams</h2>
<p>Keep the explanation close to the action while maintaining a clean mobile experience.</p>
</div>
<div class="col-lg-6 order-1 order-lg-2 mb-4 mb-lg-0">
<img src="team.jpg" class="img-fluid" alt="Team working together">
</div>
</div>
</section>Here, columns stack on screens smaller than lg, and the image appears first. On large screens and above, the text returns to the left and the image moves to the right. The utility classes mb-4 and mb-lg-0 add mobile spacing without affecting the desktop layout.
Accessibility Considerations
Changing visual order is useful, but it should be done carefully. Screen readers and keyboard navigation often follow the HTML source order, not necessarily the visual order created with CSS. If the visual sequence and the document sequence are very different, users who rely on assistive technology may have a confusing experience.
For simple image-and-text sections, this is usually not a serious issue. However, for forms, checkout flows, step-by-step instructions, or interactive components, the source order should normally match the logical reading order. Do not use visual ordering to create a layout that reads one way visually and another way structurally.
A good rule is: put the most logical reading order in the HTML, then use Bootstrap order classes only for visual enhancement. If the content would make no sense when read in source order, reconsider the structure.
Bootstrap 3 Projects
If you are working with Bootstrap 3, the grid is based on floats rather than Flexbox. Bootstrap 3 used push and pull classes, such as col-md-push-6 and col-md-pull-6, to rearrange columns at certain breakpoints. These classes can still work in older projects, but they are less flexible than modern order utilities.
For new work, Bootstrap 4 or Bootstrap 5 is generally the better choice. Their Flexbox-based grid makes responsive ordering clearer and easier to maintain.
Practical Tips
- Start with the mobile layout. Decide what users should see first on small screens.
- Use breakpoint classes for desktop changes. For example, pair
order-1withorder-md-2. - Keep the HTML logical. Do not sacrifice accessibility for visual convenience.
- Test at multiple widths. Check mobile, tablet, and desktop views, not just one screen size.
- Avoid unnecessary custom CSS. Bootstrap’s built-in utilities are usually enough.
Final Thoughts
Switching Bootstrap column order on mobile is straightforward once you understand the mobile-first nature of the framework. Use unprefixed order classes to define the mobile arrangement, then use breakpoint-specific classes to set the tablet or desktop arrangement. This method is clean, maintainable, and aligned with how Bootstrap’s grid is intended to work.
The most important point is to balance visual design with structural clarity. Bootstrap can easily change how columns appear, but your HTML should still make sense when read from top to bottom. When used thoughtfully, responsive order classes give you precise control over mobile layouts without creating fragile or overly complex code.