Bootstrap 5 - problem changing column order

Question

I'm upgrading to Bootstrap 5 and can't get the column re-ordering to behave how I want. I have 3 columns: a title, an image, and a paragraph of text. On larger screens I want the image on the left with the title on the right and the paragraph of text directly below the title. On smaller screens, I want the three columns stacked vertically in the order of title, image, paragraph of text. Using .order I can mostly get things working how I want, except on larger screens I can't get the paragraph of text to appear directly below the title, rather it appears under the title but below the image albeit on the right. How can I push this third column up beside the image to appear directly below the title?

Here's my code so far:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xxl-8 col-xl-8 col-lg-8 order-1 order-lg-2">
      <div align="justify">
        <p>title</p>
      </div>
    </div>

    <div class="col-xxl-4 col-xl-4 col-lg-4 order-2 order-lg-1">
      <div><img src="image.jpg" width="200" height="300"></div>
    </div>

    <div class="col-xxl-8 col-xl-8 col-lg-8 order-3 order-lg-3 ms-auto">
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

Answer 1

Basically not possible with display flex and order only.

So either you need to:

• Switch to grid
• Display with 2 different blocks or lines using .d-{breakpoint}-{value}

Bootstrap 5 display doc

Different options, but the first is the most light:

Option 1 - Added only 1 line and some display class

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xxl-8 col-xl-8 col-lg-8 order-1 order-lg-2">
      <div align="justify">
        <p>title</p>
        <!--------------------->
        <!-- ADDED this line -->
        <!--------------------->
        <p class="d-none d-lg-block">lorem ipsum</p>
      </div>
    </div>

    <div class="col-xxl-4 col-xl-4 col-lg-4 order-2 order-lg-1">
      <div><img src="image.jpg" width="200" height="300"></div>
    </div>
    <!--------------------- ADDED d-lg-none -------------------------->
    <div class="col-xxl-8 col-xl-8 col-lg-8 order-3 d-lg-none ms-auto">
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
    
  </div>
</div>

Option 2 - Added only 1 block and some display classes

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xxl-8 col-xl-8 col-lg-8 order-1 d-lg-none">
      <div align="justify">
        <p>title</p>
      </div>
    </div>

    <div class="col-xxl-4 col-xl-4 col-lg-4 order-2 order-lg-1">
      <div><img src="image.jpg" width="200" height="300"></div>
    </div>

    <div class="col-xxl-8 col-xl-8 col-lg-8 order-3 d-lg-none ms-auto">
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
    
    <!-- ADDED block -->
    <div class="col-xxl-8 col-xl-8 col-lg-8 order-4 order-lg-2 d-none d-lg-block">
      <div align="justify">
        <p>title</p>
        <p>lorem ipsum</p>
      </div>
    </div>
    
  </div>
</div>

Option 3 - Display grid

@media (min-width: 992px){
  .grid-temp-1{
     grid-template: "a b" 0fr
                    "a c" 1fr
                    "a c" 1em / 33% 1fr;
  }
  .grid-temp-1 > div:nth-child(1) {
    grid-area: b;
  }
  .grid-temp-1 > div:nth-child(2) {
    grid-area: a;
  }
  .grid-temp-1 > div:nth-child(3) {
    grid-area: c;
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row d-lg-grid grid-temp-1">
    <div class="">
      <div align="justify">
        <p>title</p>
      </div>
    </div>

    <div class="">
      <div><img src="image.jpg" width="200" height="300"></div>
    </div>

    <div class="ms-auto">
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

Answer 2

Another option to accomplish what you want is to write your own custom order class names and only use them in your stye sheet within a breakpoint. This method does not use the Bootstrap order classes, but uses your custom order classes instead. Applying them only within select breakpoints allows the div elements to appear in different orders on different screen sizes.

For example, using this simplified HTML with custom class names:

<div class="row">
    <div class="col col-sm-4 order-1-xs-2">
        First, but second on very small screens.
    </div>
    <div class="col col-sm-4 order-2-xs-1">
        Second, but first on very small screens.
    </div>
    <div class="col col-sm-4">
        Always comes in last.
    </div>
</div>

With this CSS:

@media (max-width: 543px) {
    .order-1-xs-2 {
        order: 2 !important
    }
    .order-2-xs-1 {
        order: 1 !important
    }
}

allows me to re-order the columns on phones in portrait mode. You could use a variation of this technique, writing your own custom class names to suit your needs, and applying them in just the appropriate breakpoints.