Bootstrap v5, i want to show image column as second column on lg screen and first col on small screen

Question

I am using BS v5 and i ran into a small issue i have s simple two column row with image and text.

I want image to show in second column on large screen and show are first column in md & Large screen.

<div class="container">
  <div class="row">
       <div class="col-lg-6 order-last">
      <img src="https://www.sobharealty.com/lp-properties-in-dubai/images/lp-2021/desk-img-19May2021.jpg" >
    </div> 
    
    <div class="col-lg-6">
      <span>FIRST COL</span>
      <span>I want image on first on mobile screen i am using order-X or order-last etc feature of BS v5 but it keeps the order same it doesnt change, i read somewhere order will not change based on css on small screen based on orderclass</span>
    </div>

  </div>
</div>

https://codepen.io/KGuide/pen/LYWBrMy

How can i achieve this am i doing something wrong.

I tried using combination of order-last, order-first, order-x but they dont work. they keep the same order despite screen size

use `order-xs-first` class on your image div so that it wil be the first on mobile screens — Nico Shultz, Jun 09 '21 at 08:15
@NicoShultz, it worked... i wonder why i was not able to see it in the documentation — Learning, Jun 09 '21 at 09:14
glad it worked, I've found the docs for this here https://getbootstrap.com/docs/5.0/layout/columns/#order-classes — Nico Shultz, Jun 09 '21 at 09:30

score 0 · Accepted Answer · answered Jun 09 '21 at 08:22

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">


    <div class="col-lg-6">
      <img src="https://www.sobharealty.com/lp-properties-in-dubai/images/lp-2021/desk-img-19May2021.jpg">
    </div>
    
    <div class="col-lg-6 order-md-first">
      <span>FIRST One</span>
      <span>I want image on first on mobile screen i am using order-X or order-last etc feature of BS v5 but it keeps the order same it doesnt change, i read somewhere order will not change based on css on small screen based on orderclass</span>
    </div>


  </div>
</div>

I've added order-md-first to your content div and removed order-last from your image div.

Now when the screen is bigger than de md breakpoint the content will be the first, when the screen gets smaller than de md breakpoint the image will be first

Carol Skelly · Answer 2 · 2021-06-09T13:02:34.487

It's simply order-lg-last on the image column. You don't need order-first because that's already implied.

<div class="container">
    <div class="row">
        <div class="col-lg-6 order-lg-last">
            <img src="https://www.sobharealty.com/lp-properties-in-dubai/images/lp-2021/desk-img-19May2021.jpg">
        </div>
        <div class="col-lg-6">
            <span>FIRST COL</span>
            <span>I want image on first on mobile screen i am using order-X or order-last etc feature of BS v5 but it keeps the order same it doesnt change, i read somewhere order will not change based on css on small screen based on orderclass</span>
        </div>
    </div>
</div>

Codeply

More on re-ordering columns in Bootstrap

Bootstrap v5, i want to show image column as second column on lg screen and first col on small screen

2 Answers2