Issue with reordering columns in Bootstrap 5

Currently, I am transitioning to Bootstrap 5 and facing challenges with the column re-ordering feature. Within my layout, I have three columns: a title, an image, and a paragraph of text. My goal is to display the image on the left, the title on the right, and the paragraph below the title on larger screens. However, on smaller screens, I want the columns stacked vertically in the order of title, image, and paragraph of text.

The use of .order has helped me achieve the desired layout for the most part. Nevertheless, there is an issue on larger screens where the paragraph of text does not align directly below the title as intended. Instead, it appears under the title but below the image positioned to the right. How can I adjust this third column to move up beside the image, positioning it directly below the title?

This is the code snippet that I have been working with:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df8e3fde3ff">[email protected]</a>/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>
cssbootstrap-5

Answer №1

Impossible to achieve solely with display flex and order.

To resolve this issue, you have two options:

  • Transition to using grid layout
  • Utilize 2 distinct blocks or lines by incorporating .d-{breakpoint}-{value}

For more information on Bootstrap 5's display utilities, check out the display documentation.

There are multiple approaches available, but the first one is the most lightweight:

Option 1 - Introducing a single line along with specified display classes

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726c726e">[email protected]</a>/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>
        <!--------------------->
        <!-- Included 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 - Adding a single block with various display classes

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279677965">[email protected]</a>/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>
    
    <!-- Append 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 - Embrace 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398869884">[email protected]</a>/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

If you're looking for a clean layout, consider using a two-column design. You can easily place the heading and paragraph within their own column.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7a9b7ab">[email protected]</a>/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>

Answer №3

If you're looking for an alternative way to achieve your desired layout, consider creating your own custom order class names and using them exclusively within specific breakpoints in your stylesheet. Instead of relying on Bootstrap's order classes, you can define and apply your unique order classes to rearrange div elements based on different screen sizes.

For instance, take a look at this basic HTML snippet featuring custom class names:

<div class="row">
    <div class="col col-sm-4 order-1-xs-2">
        Appears second on very small screens.
    </div>
    <div class="col col-sm-4 order-2-xs-1">
        Displayed first on very small screens.
    </div>
    <div class="col col-sm-4">
        Always positioned last.
    </div>
</div>

By defining the following CSS rules:

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

I can adjust the column order specifically for smartphones in portrait mode. You can adapt this method by crafting personalized class names that fit your requirements and applying them selectively in designated breakpoints.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Simple JavaScript numeric input field

Hey there, I'm a beginner learning JavaScript. I'm currently working on creating a program that adds numbers input through text fields. If you want to check out the HTML code, visit this link on JS Fiddle: http://jsfiddle.net/fCXMt/ My questio ...

javascripthtmlcssmathaddition

Dealing with a routing issue in node.js/express involving JavaScript and CSS

I'm facing an issue. I need to set up a route from localhost.../cars to localhost../bmw/x1 On the localhost../cars page, there's a button that, when clicked, should load localhost../bmw/x1 This is the JavaScript code I have: const express = req ...

javascriptcssnode.jsexpressroutes

Leverage Bootstrap to apply margins to a container

I'm creating a new blog platform and I need some advice on how to properly position the blog post div in relation to the date div so it displays with the appropriate gaps. https://i.stack.imgur.com/oLbCq.jpg https://i.stack.imgur.com/CqV7b.png Here& ...

htmlcsstwitter-bootstrap

Innovative HTML5 Video Canvas Shapes

I'm currently working on creating a circular frame or canvas for live HTML5 Video. While I am able to round the corners using keyframes radius property, it results in an oval shape rather than a circle. My preference would be to utilize a div object ...

javascriptcsshtmlvideocanvas

Determine the vertical dimension of an element through a JavaScript event listener

I've been working on creating an Apple-style image sequence scroller from a codepen demo. Here's the link to the original: https://codepen.io/jasprit-singh/pen/LYxzQjB My goal is to modify the JavaScript so that the scroll height is based on a p ...

javascripthtmlcss

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

Delivering seamless css integration using express.js

Lately, I've been struggling with serving CSS using Express.js. After some trial and error, I managed to make it work. However, I'm puzzled as to why my new code works while the old one doesn't. Here's the code that now works for me: co ...

javascriptcssexpresspath

Having trouble with changing the color of an element when the radio input is checked?

Can someone help me troubleshoot this HTML and CSS code? <label class="radio"> <input type="radio" name="plan" value="plan" required> <span> <h6>Plan</h6> <i class="pe-7s-graph1 ...

htmlcss

How can I fix the issue of the header background image not resizing properly? Any suggestions?

I am currently working on improving the responsiveness of my website when a user resizes their browser window. One specific issue I'm facing is resizing the banner image as the window size changes. The website in question can be found at The CSS code ...

cssresponsive-design

Creating a soft focus effect in a specific region (behind the text)

While working on my homepage created with HTML/CSS/Javascript, I have text positioned at the top left corner of the screen. The challenge arises from the fact that I am using different backgrounds sourced from Reddit, and a script randomly selects one duri ...

javascripthtmlcssweb

What causes my animation to “reset” upon adding a new element using innerHTML?

One of the functionalities on my webpage involves a script that inserts a div called "doge" using innerHTML when a button is clicked. Additionally, there is a CSS keyframes animation applied to another div on the same page. However, whenever the button is ...

javascripthtmlcssinnerhtml

When the cursor hovers over an item, I would like to enlarge its width while simultaneously shrinking the width of two additional items

Here is a section that I have created, you can view the mockup here. The section is divided into 3 parts, each taking up around 33.3% of the width and floated. My goal is to make it so that when a specific element, like .col-one in my example, is hovered ...

csssass

Ways to hover and efficiently organize components?

My elements are floated with a width of 20%, resulting in 5 elements per line. The current arrangement looks like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Now, I want to reorganize them vertically as follows: 1 4 7 10 13 2 ...

htmlcss

Is there a way to make those three elements line up in a row side by side?

I'm working on a layout using HTML and CSS that will display two images on the left and right sides of the browser window, with text in between them. I want them all to be horizontally aligned within a container. Here is the code snippet: <div cla ...

htmlcss

Looking to keep the table width consistent in Bootstrap whether collapsible elements are displayed or hidden

When using Bootstrap 5, I want the table to maintain the same width whether collapsible elements are displayed or not. Currently, the table is shorter when collapsible elements are not visible, causing frustration for users. It seems like I need the table ...

bootstrap-5

When resizing the browser, the divs stack neatly without overlapping

We need to ensure that the 4 divs stack on top of each other without overlapping! The header should have the same width as the footer, 100% The menu should stack with the header and footer The content should be centered on the page and stack with the oth ...

htmlcssoverlapping

How come the centering of a text input field in an HTML form is proving to be so difficult using the text-align: center property?

Learning HTML has been quite the journey for me. One challenge I have faced is trying to center a search bar on my web page. Despite hours of searching and trying different tutorials, I still haven't been able to make it work. The CSS rule text-align ...

htmlcsstwitter-bootstrapbootstrap-4

Streamlining Tailwind CSS styles in your React/Next.js components for maximum efficiency

Since implementing Tailwind CSS in my React/Next.js project, I've noticed a decrease in maintainability compared to using traditional CSS or styled-components. Previously, I could easily consolidate style changes, but now I find myself duplicating cla ...

cssreactjsnext.jstailwind-css

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

Increase the distance between input boxes using CSS styling

I'm encountering an issue with adding spacing between input boxes, despite attempting to use padding. The padding only seems to move the boxes instead of creating space between them. Here is my code: ...

htmlcss