How do I change Bootstrap 3 column order on mobile layout

Question

I m making a responsive layout with a top fixed navbar   Underneath I have two columns  one for a sidebar  3   and one for content  9    Which on desktop looks like this  navbar  3  9   When I resize to mobile the navbar is compressed and hidden  then the sidebar is stacked on top of the content  like this   navbar  3   9   I would like the main content at the top  so I need to change the order on mobile to this   navbar  9   3   I found this article which covers the same points  but the accepted answer has been edited to say that the solution no applies to the current version of Bootstrap  How can I reorder these columns on mobile   Or alternatively  how can I get the sidbar list-group into my expanding navbar  Here is my code   x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt  -- Latest compiled and minified CSS -- gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt    lt  -- Optional theme -- gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap-theme min css  integrity  sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl Sp  crossorigin  anonymous  gt    lt  -- Latest compiled and minified JavaScript -- gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt    lt div class  navbar navbar-inverse navbar-static-top  gt     lt div class  container  gt       lt a href     class  navbar-brand  gt Brand Title lt  a gt       lt button class  navbar-toggle  data-toggle  collapse  data-target   navHeaderCollapse  gt         lt span class  icon-bar  gt  lt  span gt         lt span class  icon-bar  gt  lt  span gt         lt span class  icon-bar  gt  lt  span gt       lt  button gt       lt div class  collapse navbar-collapse navHeaderCollapse  gt        lt ul class  nav navbar-nav navbar-right  gt  lt  --original navbar-- gt         lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt         lt li gt  lt a href     gt FAQ lt  a gt  lt  li gt       lt  ul gt        lt  div gt     lt  div gt   lt  div gt  lt  --End Navbar Div-- gt       lt div class  container  gt     lt div class  row  gt        lt div class  col-lg-3  gt     lt div class  list-group  gt       lt a href     class  list-group-item  gt       lt h4 class  list-group-item-heading  gt Lorem ipsum lt  h4 gt       lt p class  list-group-item-text  gt Lorem Ipsum is simply dummy text  lt  p gt  lt  a gt     lt  div gt   lt  div gt  lt  --end sidebar-- gt     lt div class  col-lg-9  gt     lt div class  panel panel-default  gt       lt div class  panel-body  gt         lt div class  page-header  gt       Main Content      lt  div gt     lt  div gt   lt  div gt  lt  --end main content area-- gt  x000D   x000D   x000D

User · Answer

In Bootstrap 4  if you want to do something like this       Mobile      Desktop -----------------------------     A               A     C           B       C     B               D     D           You need to reverse the order of B then C then apply order- breakpoint -first to B  And apply two different settings  one that will make them share the same cols and other that will make them take the full width of the 12 cols    Smaller screens  12 cols to B and 12 cols to C Larger screens  12 cols between the sum of them  B   C   12    Like this   lt div class  row no-gutters  gt       lt div class  col-12  gt          A      lt  div gt       lt div class  col-12  gt           lt div class  row no-gutters  gt               lt div class  col-12 col-md-6  gt                  C              lt  div gt               lt div class  col-12 col-md-6 order-md-first  gt                  B              lt  div gt           lt  div gt       lt  div gt       lt div class  col-12  gt          D      lt  div gt   lt  div gt    Demo  https   codepen io anon pen wXLGKa

User · Answer

The answers here work for just 2 cells  but as soon as those columns have more in them it can lead to a bit more complexity  I think I ve found a generalized solution for any number of cells in multiple columns   Goals Get a vertical sequence of tags on mobile to arrange themselves in whatever order the design calls for on tablet desktop  In this concrete example  one tag must enter flow earlier than it normally would  and another later than it normally would    Mobile  1 headline   2 image   3 qty   4 caption   5 desc     Tablet   2 image    1 headline              3 qty                   5 desc       4 caption                                       So headline needs to shuffle right on tablet   and technically  so does desc - it sits above the caption tag that precedes it on mobile  You ll see in a moment 4 caption is in trouble too  Let s assume every cell could vary in height  and needs to be flush top-to-bottom with its next cell  ruling out weak tricks like a table   As with all Bootstrap Grid problems step 1 is to realize the HTML has to be in mobile-order  1 2 3 4 5  on the page  Then  determine how to get tablet desktop to reorder itself in this way - ideally without Javascript  The solution to get 1 headline and 3 qty to sit to the right not the left is to simply set them both pull-right  This applies CSS float  right  meaning they find the first open space they ll fit to the right  You can think of the browser s CSS processor working in the following order  1 fits in to the right top corner  2 is next and is regular  float  left   so it goes to top-left corner  Then 3  which is float  right so it leaps over underneath 1  But this solution wasn t enough for 4 caption  because the right 2 cells are so short 2 image on the left tends to be longer than the both of them combined  Bootstrap Grid is a glorified float hack  meaning 4 caption  is float  left  With 2 image occupying so much room on the left  4 caption attempts to fit in the next available space - often the right column  not the left where we wanted it  The solution here  and more generally for any issue like this  was to add a hack tag  hidden on mobile  that exists on tablet  to push caption out  that then gets covered up by a negative margin - like this   2 image    1 headline              3 qty                   4 hack       5 caption  6 desc                               http   jsfiddle net b9chris 52VtD 16633  HTML   lt div id headline class  quot col-xs-12 col-sm-6 pull-right quot  gt Product Headline lt  div gt   lt div id image class  quot col-xs-12 col-sm-6 quot  gt Product Image lt  div gt   lt div id qty class  quot col-xs-12 col-sm-6 pull-right quot  gt Qty  Add to cart lt  div gt   lt div id hack class  quot hidden-xs col-sm-6 quot  gt Hack lt  div gt   lt div id caption class  quot col-xs-12 col-sm-6 quot  gt Product image caption lt  div gt   lt div id desc class  quot col-xs-12 col-sm-6 pull-right quot  gt Product description lt  div gt   CSS   hack   height  50px      media  min-width   screen-sm         desc   margin-top  -50px       So  the generalized solution here is to add hack tags that can disappear on mobile  On tablet  the hack tags allow displayed tags to appear earlier or later in the flow  then get pulled up or down to cover up those hack tags  Note  I ve used fixed heights for the sake of the simple example in the linked jsfiddle  but the actual site content I was working on varies in height in all 5 tags  It renders properly with relatively large variance in tag heights  especially image and desc  Note 2  Depending on your layout  you may have a consistent enough column order on tablet   or larger resolutions   that you can avoid use of hack tags  using margin-bottom instead  like so  Note 3  This uses Bootstrap 3  Bootstrap 4 uses a different grid set  and won t work with these examples  http   jsfiddle net b9chris 52VtD 16632

User · Answer

October 2017  I would like to add another Bootstrap 4 solution  One that worked for me   The CSS  Order  property  combined with a media query  can be used to re-order columns when they get stacked in smaller screens   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  Adjust the screen size and you ll see the columns get stacked in a different order   I ll tie this in with the original poster s question  With CSS  the navbar  sidebar  and content can be targeted and then order properties applied within a media query

User · Answer

This is quite easy with jQuery using insertAfter   or insertBefore     lt div class  quot left quot  gt content lt  div gt   lt div class  quot right quot  gt sidebar lt  div gt    x000D   x000D   lt script gt      right   insertBefore  left     lt  script gt  x000D   x000D   x000D   If you want to to set o condition for mobile devices you can make it like this   x000D   x000D   lt script gt    var  iW     window  innerWidth      if   iW  lt  992            right   insertBefore   left       else           right   insertAfter   left         lt  script gt  x000D   x000D   x000D   example https   jsfiddle net w9n27k23

User · Answer

Updated 2018  For the original question based on Bootstrap 3  the solution was to use push-pull   In Bootstrap 4 it s now possible to change the order  even when the columns are full-width stacked vertically  thanks to Bootstrap 4 flexbox  OFC  the push pull method will still work  but now there are other ways to change column order in Bootstrap 4  making it possible to re-order full-width columns   Method 1 - Use flex-column-reverse for xs screens    lt div class  row flex-column-reverse flex-md-row  gt       lt div class  col-md-3  gt          sidebar      lt  div gt       lt div class  col-md-9  gt          main      lt  div gt   lt  div gt    Method 2 - Use order-first for xs screens    lt div class  row  gt       lt div class  col-md-3  gt          sidebar      lt  div gt       lt div class  col-md-9 order-first order-md-last  gt          main      lt  div gt   lt  div gt    Bootstrap 4 alpha 6   http   www codeply com go bBMOsvtJhD Bootstrap 4 1  https   www codeply com go e0v77yGtcr    Original 3 x Answer  For the original question based on Bootstrap 3  the solution was to use push-pull for the larger widths  and then the columns will show is their natural order on smaller  xs  widths   A-B reverse to B-A     lt div class  container  gt       lt div class  row  gt           lt div class  col-md-9 col-md-push-3  gt              main          lt  div gt           lt div class  col-md-3 col-md-pull-9  gt              sidebar          lt  div gt       lt  div gt   lt  div gt    Bootstrap 3  http   www codeply com go wgzJXs3gel   emre stated   You cannot change the order of columns in smaller screens but you can do that in large screens   However  this should be clarified to state   You cannot change the order of full-width  stacked  columns    in Bootstrap 3

User · Answer

You cannot change the order of columns in smaller screens but you can do that in large screens   So change the order of your columns    lt  --Main Content-- gt   lt div class  col-lg-9 col-lg-push-3  gt   lt  div gt    lt  --Sidebar-- gt   lt div class  col-lg-3 col-lg-pull-9  gt   lt  div gt    By default this displays the main content first    So in mobile main content is displayed first    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   Working fiddle here

User · Answer

Starting with the mobile version first  you can achieve what you want  most of the time    Examples here   http   jsbin com wulexiq edit html css output   lt div class  container  gt         lt h1 gt PUSH - PULL Bootstrap demo lt  h1 gt       lt h2 gt Version 1  lt  h2 gt        lt div class  row  gt          lt div class  col-xs-12 col-sm-5 col-sm-push-3 green  gt          IN MIDDLE ON SMALL MEDIUM LARGE SCREEN          lt hr gt  TOP ROW XS-SMALL SCREEN        lt  div gt          lt div class  col-xs-12 col-sm-4 col-sm-push-3 gold  gt          TO THE RIGHT ON SMALL MEDIUM LARGE SCREEN          lt hr gt  MIDDLE ROW ON XS-SMALL        lt  div gt          lt div class  col-xs-12 col-sm-3 col-sm-pull-9 red  gt          TO THE LEFT ON SMALL MEDIUM LARGE SCREEN          lt hr gt  BOTTOM ROW ON XS-SMALL        lt  div gt        lt  div gt        lt h2 gt Version 2  lt  h2 gt        lt div class  row  gt          lt div class  col-xs-12 col-sm-4 col-sm-push-8 yellow  gt          TO THE RIGHT ON SMALL MEDIUM LARGE SCREEN          lt hr gt  TOP ROW ON XS-SMALL        lt  div gt          lt div class  col-xs-12 col-sm-4 col-sm-pull-4 blue  gt          TO THE LEFT ON SMALL MEDIUM LARGE SCREEN          lt hr gt  MIDDLE ROW XS-SMALL SCREEN        lt  div gt          lt div class  col-xs-12 col-sm-4 col-sm-pull-4 pink  gt          IN MIDDLE ON SMALL MEDIUM LARGE SCREEN          lt hr gt  BOTTOM ROW ON XS-SMALL        lt  div gt        lt  div gt        lt h2 gt Version 3  lt  h2 gt        lt div class  row  gt          lt div class  col-xs-12 col-sm-5 cyan  gt          TO THE LEFT ON SMALL MEDIUM LARGE SCREEN TOP ROW ON XS-SMALL        lt  div gt          lt div class  col-xs-12 col-sm-3 col-sm-push-4 orange  gt          TO THE RIGHT ON SMALL MEDIUM LARGE SCREEN          lt hr gt  MIDDLE ROW ON XS-SMALL        lt  div gt          lt div class  col-xs-12 col-sm-4 col-sm-pull-3 brown  gt          IN THE MIDDLE ON SMALL MEDIUM LARGE SCREEN          lt hr gt  BOTTOM ROW XS-SMALL SCREEN        lt  div gt        lt  div gt        lt h2 gt Version 4  lt  h2 gt       lt div class  row  gt          lt div class  col-xs-12 col-sm-4 col-sm-push-8 darkblue  gt          TO THE RIGHT ON SMALL MEDIUM LARGE SCREEN          lt hr gt  TOP ROW XS-SMALL SCREEN        lt  div gt          lt div class  col-xs-12 col-sm-4 beige  gt          MIDDLE ON SMALL MEDIUM LARGE SCREEN          lt hr gt  MIDDLE ROW ON XS-SMALL        lt  div gt          lt div class  col-xs-12 col-sm-4 col-sm-pull-8 silver  gt          TO THE LEFT ON SMALL MEDIUM LARGE SCREEN          lt hr gt  BOTTOM ROW ON XS-SMALL        lt  div gt        lt  div gt      lt  div gt

[html] How do I change Bootstrap 3 column order on mobile layout?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to multiple-columns