Get your columns in order with Bootstrap4

Question

Get your columns in order with Bootstrap4

I need to rearrange my 3 columns on desktop and mobile devices in different ways.

Currently, my grid structure is set up like this:

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

For the mobile view, I want them displayed in the following order:

1-3-2

However, I'm having trouble figuring out how to achieve this using the Bootstrap 4 .col-md-push-* and .col-md-pull-* classes.

css twitter-bootstrap bootstrap-4 grid

Answer 1

Answer №1

Revamping in Bootstrap 5 for 2021

The new responsive ordering classes have been introduced as order-first, order-last, and from order-0 to order-5

Check out the Demo here

Back in 2018 with Bootstrap 4

The responsive ordering classes were order-first, order-last and ranged from order-0 to order-12

The **push** and **pull** classes in Bootstrap 4 are now labelled as `push-{viewport}-{units}` and `pull-{viewport}-{units}`, without the `xs-` prefix. To achieve a 1-3-2 layout on mobile/xs, utilize this [demo for Bootstrap 4 push and pull](http://www.codeply.com/go/OmrcmepbUp) (Note: this functionality is pre-4.0 beta only)

Bootstrap 4.1+

With Bootstrap 4 employing flexbox, altering the column order is straightforward. Columns can be ordered from order-1 to order-12, responsively as demonstrated in order-md-12 order-2 (appearing last on md, and second on xs) in relation to the parent .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

See the live Demo: Implementing order-* classes to reorder

Desktop view (larger screens): https://i.sstatic.net/M53x9.png

Mobile view (smaller screens): https://i.sstatic.net/q0A5m.png

You can also adjust column order using the flexbox direction utilities...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

View the Demo: Flexbox Direction for Ordering in Bootstrap 4.1

Demos of older versions
demo - alpha 6
demo - beta (3)

Explore more Bootstrap 4.1+ ordering demos

Related
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns

A-C-B A-B-C

Answer 2

Revamping in Bootstrap 5 for 2021

The new responsive ordering classes have been introduced as order-first, order-last, and from order-0 to order-5

Check out the Demo here

Back in 2018 with Bootstrap 4

The responsive ordering classes were order-first, order-last and ranged from order-0 to order-12

The **push** and **pull** classes in Bootstrap 4 are now labelled as `push-{viewport}-{units}` and `pull-{viewport}-{units}`, without the `xs-` prefix. To achieve a 1-3-2 layout on mobile/xs, utilize this [demo for Bootstrap 4 push and pull](http://www.codeply.com/go/OmrcmepbUp) (Note: this functionality is pre-4.0 beta only)

Bootstrap 4.1+

With Bootstrap 4 employing flexbox, altering the column order is straightforward. Columns can be ordered from order-1 to order-12, responsively as demonstrated in order-md-12 order-2 (appearing last on md, and second on xs) in relation to the parent .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

See the live Demo: Implementing order-* classes to reorder

Desktop view (larger screens): https://i.sstatic.net/M53x9.png

Mobile view (smaller screens): https://i.sstatic.net/q0A5m.png

You can also adjust column order using the flexbox direction utilities...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

View the Demo: Flexbox Direction for Ordering in Bootstrap 4.1

Demos of older versions
demo - alpha 6
demo - beta (3)

Explore more Bootstrap 4.1+ ordering demos

Related
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns

A-C-B A-B-C

Answer 3

Answer №2

One way to achieve this effect is by using the CSS "Order" property along with a media query.

Here's an example of how you can do it:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

You can view this code in action on CodePen: https://codepen.io/preston206/pen/EwrXqm

Answer 4

One way to achieve this effect is by using the CSS "Order" property along with a media query.

Here's an example of how you can do it:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

You can view this code in action on CodePen: https://codepen.io/preston206/pen/EwrXqm

Answer 5

Answer №3

This method can also be effective:

<div class="wrapper">
            <div class="block">
                <div class="item-1">
                    A
                </div>
                <div class="item-2">
                    B
                </div>
                <div class="item-3">
                    C
                </div>
            </div>
          </div>

Answer 6

This method can also be effective:

<div class="wrapper">
            <div class="block">
                <div class="item-1">
                    A
                </div>
                <div class="item-2">
                    B
                </div>
                <div class="item-3">
                    C
                </div>
            </div>
          </div>

Answer 7

Answer №4

When working with Bootstrap 3, you may be wondering if there is a simpler way in Bootstrap 4 to achieve the same result. Nevertheless, the following CSS code should be effective for your needs:

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

Additionally, remember to apply the class to the second column as shown below:

<div class="row">
    <div class="col-xs-3 col-md-6">
        1
    </div>
    <div class="col-xs-3 col-md-6 pull-right-xs">
        2
    </div>
    <div class="col-xs-6 col-md-12">
        3
    </div>
</div>

UPDATE:

Upon further inspection, it appears that what was previously described is essentially the same as the pull-xs-right class in Bootstrap 4. Simply apply this class to the second column for optimal results.

Answer 8

When working with Bootstrap 3, you may be wondering if there is a simpler way in Bootstrap 4 to achieve the same result. Nevertheless, the following CSS code should be effective for your needs:

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

Additionally, remember to apply the class to the second column as shown below:

<div class="row">
    <div class="col-xs-3 col-md-6">
        1
    </div>
    <div class="col-xs-3 col-md-6 pull-right-xs">
        2
    </div>
    <div class="col-xs-6 col-md-12">
        3
    </div>
</div>

UPDATE:

Upon further inspection, it appears that what was previously described is essentially the same as the pull-xs-right class in Bootstrap 4. Simply apply this class to the second column for optimal results.

Answer 9

Answer №5

According to the revisited answer above, column-ordering does not function correctly in Bootstrap 4 beta. The solution is to follow the codeply Flexbox order demo - alpha/beta links provided in the answer. Below is an example:

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

It should be noted that using the "Flexbox order demo - beta" may lead to compatibility issues with the alpha codebase. Copying and pasting the code directly outside of codeply should resolve any display issues in a single column layout.

Answer 10

According to the revisited answer above, column-ordering does not function correctly in Bootstrap 4 beta. The solution is to follow the codeply Flexbox order demo - alpha/beta links provided in the answer. Below is an example:

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

It should be noted that using the "Flexbox order demo - beta" may lead to compatibility issues with the alpha codebase. Copying and pasting the code directly outside of codeply should resolve any display issues in a single column layout.

Answer 11

Answer №6

An effective strategy is to create two separate containers - one designed for mobile orders and hidden on desktop screens, and the other tailored for desktop orders and hidden on mobile screens.

Answer 12

An effective strategy is to create two separate containers - one designed for mobile orders and hidden on desktop screens, and the other tailored for desktop orders and hidden on mobile screens.

Get your columns in order with Bootstrap4

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Issues with IE9's CSS hover functionality are causing problems

Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

How can I center two divs within a wrapper div without also centering all the text inside?

Tips for avoiding anchor tag text from being split across two lines when resizing

Manipulate inherited CSS styles from an external source

Styling with Chemistry: CSS for Chemical Formulas

Is it possible to create an index.html page with all the necessary head tags to prevent duplicate code across multiple html pages?

Can a custom CSS be linked directly to the angular-cli.json file?

Achieving Vertical Content Alignment in Bootstrap 4

Issue with Refreshing Header Row Filter Control in Bootstrap Table

What is the best way to center a Checkbox in HTML5 and CSS?

The bottom of the page displays varying outcomes between Code Snippet (CodePen) and Angular

The display of data attributes is not being rendered correctly

Delete the placeholder image from a div once live content has been inserted into it

My draggable item seems stuck in place. Any ideas on how to get it moving again?

The form-group nested within a form-horizontal is exceeding the boundaries of the preceding form-group

Guide on displaying gallery images when clicking on a specific class

Encountered an error while using NPM Bootstrap Carousel: Uncaught TypeError - Super expression must be either null or a function

Move to the right with floating using Angular Material

Make the div fill the entire width and height of its parent element