Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Order columns through Bootstrap4

I have 3 columns which I want to order in different ways on desktop and mobile. Currently, my gird 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.

like image 413
Cray Avatar asked Jun 14 '16 14:06

Cray


People also ask

How can you order columns in Bootstrap?

Write the columns in an order, and show them in another one. You can easily change the order of built-in grid columns with . col-md-push-* and . col-md-pull-*modifier classes where * range from 1 to 11.

How do you order elements in Bootstrap 4?

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 . It's also possible to change column order using the flexbox direction utils...

How do I change the column order in Bootstrap 4 for mobile layout?

To do this, you would need to set the source code to be in the order you want it to be on mobile. Then add the order classes to the columns specifying the order at the breakpoint you choose. In our case we want SM and up. Using Bootstrap's order classes you can essentially move columns around like a forklift.

How do I change the order of columns in Bootstrap 3?

By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.


1 Answers

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): enter image description here

Mobile (smaller screens): enter image description here

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

like image 183
Zim Avatar answered Sep 19 '22 17:09

Zim