Bootstrap 5 - problem changing column order - css

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/bootstrap#5.0.2/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/bootstrap#5.0.2/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/bootstrap#5.0.2/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/bootstrap#5.0.2/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

Go with two column layout. You can nest the heading and the paragraph inside one column.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/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>Hello World</p>
</div>
<div align="justify">
<p>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.png" width="200" height="300"></div>
</div>
</div>
</div>