Customize the order of elements in Bootstrap for mobile devices

How can I create a responsive Bootstrap layout with 2 columns and a nested row in the right column? The desired layout is as follows:

Desktop Version:

---------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

Mobile Version (stacked in order):

-------- | 1 | | | -------- | 2 | | | | | | | | | | | -------- | 3 | | | --------

Here is my code:

<div class="row">
   <div class="col-lg-4">
     <div class="row">
         <div class="col-lg-12">1
     </div>
      <div class="row">
         <div class="col-lg-12">3
     </div>
   </div>
   <div class="col-lg-8 order-lg-first">2
   </div>
</div>

Currently, the order in the mobile version is 1, 3, 2. However, I am aiming for the order to be 1, 2, 3.

csstwitter-bootstrapbootstrap-4

Answer №1

In Bootstrap 4, due to the use of flexbox, the columns will always have equal height, which may prevent achieving the desired desktop (lg) layout.

One solution is to disable flexbox for the lg size. Instead, utilize floats so that columns 1 and 3 naturally align to the right, considering column 2's height. The flexbox order- attribute can be maintained for mobile view.

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

Explanation of how this method works

  • Ensure columns are in the same row, as ordering is relative to the parent element
  • The d-flex d-lg-block class disables flex for the lg breakpoint and above
  • Use of float-left to float columns when flex is disabled
  • The order-* class reorders the columns when flex is enabled

Another approach involves a flexbox wrapping technique that utilizes w-auto...

Additional resources:
How to fix unexpected column order in bootstrap 4?
Bootstrap Responsive Columns Height

B-A-C -> A-B-C

Answer №2

If you want to achieve a specific layout in Bootstrap 4, you can utilize the order-lg-first class for the second column and the offset-lg-8 class for the third column (assuming they are in order 1-2-3 in the HTML).

The offset-lg-8 class will push the third column to the right by 8 units (equal to the width of the second column) on screens that are large (lg) or larger, resulting in the desired effect.

Here is a functional code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
<div class="row">
<div class="col-lg-4 bg-warning">1</div>
<div class="col-lg-8 order-lg-first bg-secondary">2</div>
<div class="col-lg-4 offset-lg-8 bg-warning">3</div>
</div>
</div>

Answer №3

If you want to rearrange the column order, you can utilize the push and pull classes. For more detailed information, check out this resource

<div class="row">
    <div class="col-md-4 col-md-push-4">
        <div class="alert alert-danger">B</div>
    </div>
    <div class="col-md-4 col-md-pull-4 col-sm-6">
        <div class="alert alert-info">A</div>
    </div>
    <div class="col-md-4 col-sm-6">
        <div class="alert alert-info">C</div>
    </div>
</div>

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

Ways to modify the color of a container's border by interacting with radio buttons through JavaScript

I'm currently facing a challenge with creating a settings dropdown menu that allows users to select different themes. Each theme is supposed to modify the background color and border color, but I have successfully implemented only the background color ...

javascripthtmlcss

The elements on the webpage are spilling over with content

I encountered an issue while creating a dashboard with a sidebar on the left side. When adding content to the page, some of it ended up hidden behind the sidebar. I tried using overflow-x:auto and this was the result: https://i.stack.imgur.com/5qHJY.jpg Be ...

htmlcssangularflexbox

Alignment of Submenus in a CSS Vertical Menu

I'm currently facing an issue with my vertical menu and submenu alignment. Despite everything working correctly, the submenu does not align horizontally as expected, instead shifting up against the header div above it. Any assistance to resolve this w ...

cssvertical-alignmentalignment

What can be done to ensure that the a href tag is functioning as clickable?

Having an issue with my HTML and CSS code for a notification dropdown box. I am unable to click the tag, even after attempting to use JavaScript. Can't seem to figure out what's causing this problem. Any advice on how to make the tag clickable? ...

javascriptphpjqueryhtmlcss

What is the reason behind Chrome's automatic scrolling to ensure the clicked element is fully contained?

Recently, I have observed that when performing ajax page updates (specifically appends to a block, like in "Show more comments" scenarios) Chrome seems to automatically scroll in order to keep the clicked element in view. What is causing this behavior? Wh ...

javascripthtmlcsschromium

Mozilla Firefox's webpage controls adapt according to the type of authentication being used

On my .NET MVC web page, I have 3 radio buttons for selecting a value on a form. However, in a specific test environment with two authentication methods (user/password or certificate), the radio buttons mysteriously change to checkboxes when the page loads ...

css.nethtmlfirefox

Disabling the @import cache feature in LessCSS Assetic

I'm facing a minor issue that is robbing me of precious time. Currently, I am using the assetic plugin with the lesscss filter in my symfony2.1 project. The problem lies in Assetic not detecting changes in imported files when using the @import functi ...

phpcsssymfonylessassetic

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

I am facing an issue with importing CSS from a public library built with Vite. When I try to import the CSS using: import 'rd-component/dist/style.css'; I encounter an error during the project build process: ERROR in ./src/page/photo/gen/GenPhot ...

cssreactjstypescriptvite

Bursting at the seams: concealed issues

I am currently facing an issue with a facebook like button placed in the caption section of a slideshow div, located at the far bottom right corner. The problem arises when the 'post to wall' prompt pops up below the like button, but is cut off d ...

htmlcssfacebook-likeoverflow

Tips for arranging divs in the exact way you want

Can you assist me in creating a layout like the one shown in the image below? I have attempted to achieve it, but my understanding of CSS is lacking and the layout needs to be completed quickly... I experimented with CSS properties such as float, overflow ...

csshtml

How to implement a two-column layout within an IE contenteditable element

Currently, I am working on a contenteditable element that requires content to be displayed in a two-column layout. Users should have the ability to place the cursor anywhere within the text and move between positions using arrow keys. To achieve this, I a ...

htmlcssinternet-explorercontenteditable

Changing the position of elements based on screen resolution for Desktop and Mobile

I'm working on a page with a sidebar that contains elements on desktop. When viewed on mobile, the sidebar moves under the main page. However, I would like those elements to be displayed above the main page on mobile, similar to this: Any suggestions ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to incorporate a solid element onto a see-through background?

I have a link at "http://hastebin.com/julayefoto.xml" and I need assistance in making the content inside the bubble named "Test Test Test" non-transparent while keeping the bubble itself transparent. Any help would be greatly appreciated. Thank you :) ...

phphtmlcsselement

Maintaining Object Position in 2D Transforms

I am trying to create multiple perspective-transformed rectangles in the lower right corner of a canvas by using ctx.transform: ctx.transform(1, 0, -1, 1, 10, 10). My goal now is to adjust the size of the drawing based on a variable scale=n, while keeping ...

javascripthtmlcsscanvastransform

When scrolling down a webpage, the background color of the content does not stretch along with the page

I've created a webpage with a sticky header and footer, along with a scrollbar on the main content. However, I'm facing an issue where the background color of the content does not extend beyond the viewport when scrolling down. The text is visibl ...

htmlcss

I'm curious about how I can determine the reason why my badge is not accepting HTML tags in its tooltip

My goal is to integrate a bootstrap badge-alert with an HTML tooltip. I am following the example provided at https://getbootstrap.com/docs/4.3/components/tooltips/ Despite my efforts, when using the code snippet below, the tooltip appears but the HTML tag ...

htmlbootstrap-4

Problem arises with table nth-child selector following the addition of grid-gap

Our current table looks like this: https://i.sstatic.net/eUyBB.png The first row has a background color and the second row is white - which is correct. Now I would like to align the attributes to the right. I added the following code to the table: .table ...

javascripthtmlcss

Why does the <div> element still have an offset even though its width and height are set to 100px and padding, margin, and border are set to 0px?

After styling my div element with specific CSS rules, I'm encountering an issue. The div has a set width and height of 100px along with padding, border, and margin all set to 0px. However, the elements are not being offset from the edges of the browse ...

javascriptjqueryhtmlcss

Overriding a CSS property with !important proves ineffective

I need to make adjustments to an old internal page that currently has the following CSS styling: table { font-family: "Arial"; font-size: 13px; text-align: left; border-collapse: collapse; border: 1px solid black; vertical-align: m ...

htmlcss

Display the table once the radio button has been selected

Before we proceed, please take a look at the following two images: image 1 image 2 I have over 20 fields similar to 'Image 1'. If "Yes" is selected, then a table like in 'Image 2' should be displayed. This means I have 20 Yes/No fields ...

javascripthtmljquerycss