Order columns through Bootstrap4

Question

I have 3 columns which I want to order in different ways on desktop and mobile  Currently  my gird looks like this    x000D   x000D   lt div class  row  gt  x000D     lt div class  col-xs-3 col-md-6  gt  x000D      1 x000D     lt  div gt  x000D     lt div class  col-xs-3 col-md-6  gt  x000D      2 x000D     lt  div gt  x000D     lt div class  col-xs-6 col-md-12  gt  x000D      3 x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Accepted Answer

2018 - Revisiting this question with the latest 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  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    lt div class  container  gt       lt div class  row  gt           lt div class  col-3 col-md-6  gt               lt div class  card card-body  gt 1 lt  div gt           lt  div gt           lt div class  col-6 col-md-12 order-2 order-md-12  gt               lt div class  card card-body  gt 3 lt  div gt           lt  div gt           lt div class  col-3 col-md-6 order-3  gt               lt div class  card card-body  gt 2 lt  div gt           lt  div gt       lt  div gt   lt  div gt    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      lt div class  container  gt       lt div class  row flex-column-reverse flex-md-row  gt           lt div class  col-md-8  gt              2          lt  div gt           lt div class  col-md-4  gt              1st on mobile          lt  div gt       lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

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     lt div class  container  gt   lt div class  row  gt       lt div class  col-3 col-md-6  gt           lt div class  card card-block  gt 1 lt  div gt       lt  div gt       lt div class  col-6 col-md-12  flex-md-last  gt           lt div class  card card-block  gt 3 lt  div gt       lt  div gt       lt div class  col-3 col-md-6   gt           lt div class  card card-block  gt 2 lt  div gt       lt  div gt   lt  div gt    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

User · Answer

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    lt div class  row  gt       lt div class  col-xs-3 col-md-6  gt          1      lt  div gt       lt div class  col-xs-3 col-md-6 pull-right-xs  gt          2      lt  div gt       lt div class  col-xs-6 col-md-12  gt          3      lt  div gt   lt  div gt    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

User · Answer

even this will work    lt div class  container  gt               lt div class  row  gt                   lt div class  col-4 col-sm-4 col-md-6 order-1  gt                      1                  lt  div gt                   lt div class  col-4 col-sm-4  col-md-6 order-3  gt                      2                  lt  div gt                   lt div class  col-4 col-sm-4  col-md-12 order-2  gt                      3                  lt  div gt               lt  div gt             lt  div gt

User · Answer

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

[css] Order columns through Bootstrap4

Examples related to css

Examples related to bootstrap-4

Examples related to grid