Bootstrap 5 - problem changing column order-CodePudding

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 >
  <div >
    <div >
      <div align="justify">
        <p>title</p>
      </div>
    </div>

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

    <div >
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <div align="justify">
        <p>title</p>
        <!--------------------->
        <!-- ADDED this line -->
        <!--------------------->
        <p >lorem ipsum</p>
      </div>
    </div>

    <div >
      <div><img src="image.jpg" width="200" height="300"></div>
    </div>
    <!--------------------- ADDED d-lg-none -------------------------->
    <div >
      <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 >
  <div >
    <div >
      <div align="justify">
        <p>title</p>
      </div>
    </div>

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

    <div >
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
    
    <!-- ADDED block -->
    <div >
      <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 >
  <div >
    <div >
      <div align="justify">
        <p>title</p>
      </div>
    </div>

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

    <div >
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Go with two column layout. You can nest the heading and the paragraph inside one column.

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

<div >
    <div >
        <div >
            <div align="justify">
                <p>Hello World</p>
            </div>
            <div align="justify">
                <p>Lorem ipsum</p>
            </div>
        </div>
        <div >
            <div><img src="image.png" width="200" height="300"></div>
        </div>  
    </div>
</div>