Order columns through Bootstrap4

Question

I have 3 columns which I want to order in different ways on desktop and mobile.

Currently, my grid looks 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>

In the mobile view I want to have the following output:

1-3-2

Unfortunately I don't get how to solve this with the .col-md-push-* and .col-md-pull-* classes in Bootstrap 4.

It is described in the docs: http://v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering — Cray, Jun 15 '16 at 06:54
col-xx-push-*and col-xx-pull-* are the same like bootstrap 3. Do you want the grid for 'md' and above 1-2, other row 3 and for 'sm' and below 1-3-2? — tmg, Jun 25 '16 at 10:42

Carol Skelly · Accepted Answer · 2021-06-09T12:51:13.633

173

2021 - Bootstrap 5

The responsive ordering classes are now order-first, order-last and order-0 - order-5

Demo

2018 - Bootstrap 4

The responsive ordering classes are now order-first, order-last and order-0 - order-12

The Bootstrap 4 **push** **pull** classes are now `push-{viewport}-{units}` and `pull-{viewport}-{units}` and the `xs-` infix has been removed. To get the desired 1-3-2 layout on mobile/xs would be: [Bootstrap 4 push pull demo](http://www.codeply.com/go/OmrcmepbUp) (This only works pre 4.0 beta)

Bootstrap 4.1+

Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12, responsively such as order-md-12 order-2 (last on md, 2nd on xs) relative 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>

Demo: Change order using order-* classes

Desktop (larger screens):

Mobile (smaller screens):

It's also possible to change column order using the flexbox direction utils...

<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>

Demo: Bootstrap 4.1 Change Order with Flexbox Direction

Older version demos
demo - alpha 6
demo - beta (3)

See 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

edited Jun 09 '21 at 12:51

answered Mar 28 '17 at 12:33

Carol Skelly

351,302
90
710
624

@Alireza - The `order-*` classes can't be used multiple times. That's how it works. From the docs.. *"These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers."* – Carol Skelly Sep 20 '18 at 14:11
@Zim So `order-2 order-md-12` classes cannot be used together? – Alex Sep 22 '18 at 09:36
No, they *can* be used together. – Carol Skelly Sep 22 '18 at 11:18
@Zim `order-md-1 order-sm-2` and `order-1 order-sm-2` don't work. I'm doing it manually – Alex Sep 25 '18 at 10:37
They work if you're using the version indicated above https://www.codeply.com/go/23VFxwWTdP. Also, I don't know what you're trying to accomplish which is most likely different than the original question for which my answer applies. Remember cols are relative to each other in the same row. – Carol Skelly Sep 25 '18 at 10:57
@Zim, OP(@Cray) is asking for order 1-3-2 on mobile. Your original answer shows it correctly( now crossed out) but modified answer for bootstrap shows 1-2-3 on mobile. Would you be able to fix that? – Dush Nov 07 '18 at 04:35
@Zim, Actually the above code is correct but the picture and the **2018 Update Bootstrap 4.0+** [demo](https://www.codeply.com/go/Lmy5dG7C33) is not showing 1-3-2 order – Dush Nov 07 '18 at 10:43
@Dush it does work in 4.0, but it wouldn't work that way in 4.0 alpha as explained above – Carol Skelly Dec 04 '18 at 12:17

score 28 · Answer 2 · answered Oct 19 '17 at 19:24

28

This can also be achieved with the CSS "Order" property and a media query.

Something like this:

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

CodePen Link: https://codepen.io/preston206/pen/EwrXqm

answered Oct 19 '17 at 19:24

bprdev

693
9
12

I couldn't get order with bootstrap classes just for mobile. This did work, thanks – Xavier Ojeda Aguilar Jun 15 '20 at 00:40

Nikhil S · Answer 3 · 2018-05-24T10:27:12.107

even this will work:

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

Marek Kus · Answer 4 · 2016-06-15T18:26:43.547

2

I'm using Bootstrap 3, so i don't know if there is an easier way to do it Bootstrap 4 but this css should work for you:

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

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

...and add class to second column:

<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>

EDIT:

Ohh... it looks like what i was writen above is exacly a .pull-xs-right class in Bootstrap 4 :X Just add it to second column and it should work perfectly.

edited Jun 15 '16 at 18:26

answered Jun 15 '16 at 07:26

Marek Kus

150
6

Ops... i done mistake in style code :X Try now. And if it wouldn't work, try adding !important to float. – Marek Kus Jun 15 '16 at 18:27
1

It's the same. I've worked with the .pull-xs-right class from Bootsrap 4. – Cray Jun 15 '16 at 21:34

user3893613 · Answer 5 · 2017-09-19T03:45:21.877

Since column-ordering doesn't work in Bootstrap 4 beta as described in the code provided in the revisited answer above, you would need to use the following (as indicated in the codeply 4 Flexbox order demo - alpha/beta links that were provided in the answer).

<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>

Note however that the "Flexbox order demo - beta" goes to an alpha codebase, and changing the codebase to Beta (and running it) results in the divs incorrectly displaying in a single column -- but that looks like a codeply issue since cutting and pasting the code out of codeply works as described.

score -4 · Answer 6 · answered Jun 14 '16 at 14:18

-4

You can do two different container one with mobile order and hide on desktop screen, another with desktop order and hide on mobile screen

answered Jun 14 '16 at 14:18

MarBer

535
1
5
22

2

It would work, but it's unnecessary data duplication. You can do it with manipulation of float parametr (and propabbly some other ways too). – Marek Kus Jun 15 '16 at 07:31

Order columns through Bootstrap4

6 Answers6

Linked

Related