Good day! I am trying to figure out if the scenario below is possible.
When it is on desktop/laptop the layout should be like this
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9">
article
</div>
When it is on small screen the two div will switch and must be like this one
<div class="col-md-9">
sidebar
</div>
<div class="col-md-3">
article
</div>
Your answer is appreciated!
You can! By adding multiple grid classes to your <div>'s you can define the size of your columns for each breakpoint. In your case this might be col-xs-9 col-md-3 on the sidebar and col-xs-3 col-md-9 on the article. This would make the sidebar take up 9 out of 12 columns for the xs and sm breakpoint sizes, and 3 out of 12 columns for the md and lg breakpoint sizes.
Open the following example in fullscreen to play with the breakpoints.
.box {
border: 1px solid #c66;
background-color: #f99;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-9 col-md-3 box">
sidebar
</div>
<div class="col-xs-3 col-md-9 box">
article
</div>
From your comment I see you want the article to be on top of the sidebar for small screens. This is a bit more tricky. You need to do three things:
Develop mobile first by starting with the layout for small screens. You need to change the order of the sidebar and article <div>.
Make sure that on small screens both the sidebar and the article take up 12 out of 12 columns by using col-xs-12. This will make the sidebar get pushed below the article.
Note that on desktop screens the sidebar and article do appear next to eachother, but with the sidebar on the right instead of the left. You can change this by pulling the sidebar to the left by adding col-md-pull-9 (you need to pull it 9 columns to the left, the amount of columns that the article takes up) and pushing the article to the right by adding col-md-push-3 (you need to push it 3 columns to the right, the amount of columns that the sidebar takes up).
See the updated example:
.box {
border: 1px solid #c66;
background-color: #f99;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-md-9 col-md-push-3 box">
article
</div>
<div class="col-xs-12 col-md-3 col-md-pull-9 box">
sidebar
</div>
There is few prefixes for bootstrap to specify width class: -xs- / -sm- / -md- / -lg- (from smallest to biggest width).
So from -md- and bigger screen you have col-md-3 and col-md-9. To get them in reverse order on pre--md- class you can specify -xs- or -sm- prefix.
So to reverse your classes, just write:
<div class="col-md-9 col-xs-3"></div>
<div class="col-md-3 col-xs-9"></div>
Try this:
<div class="col-sm-9 col-md-3">
sidebar
</div>
<div class="col-sm-3 col-md-9">
article
</div>
This will display the sidebar in 9 blocks in eXtraSmall (xs) and SMall (sm) and in 3 Blocks for MeDium (md) and LarGe (lg) and vice versa.
Related
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:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Brand Title
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right"><!--original navbar-->
<li class="active">Home</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div><!--End Navbar Div-->
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Lorem ipsum</h4>
<p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
</div>
</div><!--end sidebar-->
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
Main Content
</div>
</div>
</div><!--end main content area-->
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.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
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.
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:
<div class="row flex-column-reverse flex-md-row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9">
main
</div>
</div>
Method 2 - Use order-first for xs screens:
<div class="row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9 order-first order-md-last">
main
</div>
</div>
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).
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
main
</div>
<div class="col-md-3 col-md-pull-9">
sidebar
</div>
</div>
</div>
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.
Bootstrap 3 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:
<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>
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/
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.
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
<div class='row no-gutters'>
<div class='col-12'>
A
</div>
<div class='col-12'>
<div class='row no-gutters'>
<div class='col-12 col-md-6'>
C
</div>
<div class='col-12 col-md-6 order-md-first'>
B
</div>
</div>
</div>
<div class='col-12'>
D
</div>
</div>
Demo: https://codepen.io/anon/pen/wXLGKa
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
<div class="container">
<h1>PUSH - PULL Bootstrap demo</h1>
<h2>Version 1:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 col-sm-push-3 green">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 2:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 3:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 cyan">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW XS-SMALL SCREEN
</div>
</div>
<h2>Version 4:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 beige">
MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
</div>
This is quite easy with jQuery using insertAfter() or insertBefore():
<div class="left">content</div>
<div class="right">sidebar</div>
<script>
$('.right').insertBefore('left');
</script>
If you want to to set o condition for mobile devices you can make it like this:
<script>
var $iW = $(window).innerWidth();
if ($iW < 992){
$('.right').insertBefore('.left');
}else{
$('.right').insertAfter('.left');
}
</script>
example
https://jsfiddle.net/w9n27k23/
Its very simple, write your html the way you would want it to be viewed in mobile. Then using the bootstrap order class you can arrange how you want it to viewed on desktop.
<html>
<head>
<title>Order View</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col order-md-2">
<h1>IMAGE</h1>
</div>
<div class="col order-md-1">
<h1>TEXT</h1>
</div>
</body>
</html>
I am using Bootstrap 3 and on mobile devices I'd like to vertically stack all the div's (sidebar & content) and position the left sidebar below the main container (currently to the right of the left sidebar) on mobile (xs) devices. The HTML, looks like this
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-push-9"> Sidebar</div>
<div class="col-sm-9 col-xs-pull-3"> Main Container</div>
</div>
The problem with above is that, using col-xs-push-9 on sidebar and col-xs-pull-3 on main container they appear in reverse order on large(lg) medium(md) and (sm) devices. I do not want to reverse the order but only want to have the left sidebar below the main container on extra small mobile devices.
I want a bootstrap solution not a JS / jQuery solution.
Pls help.
Regards,
dk
If you think "mobile-first", layout the columns in the desired mobile order first, then use push/pull to adjust the columns for larger screens..
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-push-3"> Main Container</div>
<div class="col-sm-3 col-sm-pull-9"> Sidebar</div>
</div>
</div>
http://codeply.com/go/8g4UL0J43K
Bootstrap inherits properties for larger grids from the properties set for smaller grids. Therefore you have to set the pull and push to 0 for grids larger than xs, sm, like this:
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-push-9 col-sm-push-0"> Sidebar</div>
<div class="col-xs-9 col-xs-pull-3 col-sm-pull-0"> Main Container</div>
</div>
</div>
In Bootstrap 4 you use ".order-*-{n}"
This example has 3 columns. On a large view they are evenly spaced and in the same order as the HTML. On a medium view, HTML columns 1 and 3 are half width and across from each other while the middle HTML column is dropped to the bottom and full width. On small views they are each full width in HTML column order 1,3,2.
<div class="row">
<div class="col col-sm-12 col-md-6 col-lg-4 order-1"></div>
<div class="col col-sm-12 col-md-12 col-lg-4 order-sm-last order-lg-2"></div>
<div class="col col-sm-12 col-md-6 col-lg-4 order-3"></div>
</div>
I'm trying to reorder the columns on my website via Bootstrap's method of reordering columns depending on the screen size which works fine for most of the responsive layouts I'm testing apart from 1.
The layout having problems is the Tablet Landscape Layout (1024 x 768) which displays like this:
Every other screen displays the blue div and the right div either with the red div on top if the screen is too small or on the right with the blue div aligning itself exactly next to it if the screen is large enough.
This is the code I'm using right now:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
Basket
</div>
<div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
News
</div>
</div>
</div>
</div>
Does anyone know why the blue div is so far to the right on the Tablet Landscape layout rather than touching the red div like it should?
Some general markup issues:
First of all, there's no col-xl-*, so you can get rid of those.
Secondly, you don't need col-xs-12, since the default is for it take up the whole width unless otherwise specified.
Third, Bootstrap is mobile first, so larger sizes will override the existing smaller sizes, meaning if you don't intend on changing something, there's no need to specify the larger size again.
The actual issue is that col-*-pull-* is relative to where the element would be placed. Bear in mind, you haven't changed anything in the document flow. So the elements are positioned normally and then phase shifted with left or right. Since the blue container would normally start 4 columns over, you only need to pull it back by 4 columns, instead of 8.
The whole thing can be rewritten like this:
.red { background: red }
.blue { background: blue }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-4 col-md-push-8 red"> Basket </div>
<div class="col-md-8 col-md-pull-4 blue"> News </div>
</div>
</div>
I am trying to have a centered main content div along with a right sidebar using Bootstrap 3.0.
I have tried the following code to achieve this.
BootPly
But when i resize the browser to shorter width, the sidebar gets pushed down and also the main content get wider. Is this behavior expected of bootstrap ? Do i need to add col-xs* to accommodate the shorter width ?
I am wondering if this is the correct way to achieve this design ?
Thanks !
Yes, it is default behaviour. Bootstrap 3 was built with "mobile first" in mind, so the layout is responsive by default. You can achieve this effect by writing a custom grid and not using the Bootstrap column classes, like col-sm-6 and so on.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content">
Main Content
</div>
<div class="sidebar">
Side bar
</div>
</div>
</div>
</div>
Then write some css. This is just an example, and you should customise to fit your own needs.
.sidebar { width: 33.3%; }
.content { width: 66.6%; }
You can fit two columns on the smallest screen size, but it's unlikely that this is what you are after. On small screens there's very little space for any substantial content to fit into two columns.
<div class="col-xs-6">
Main Content
</div>
<div class="col-xs-6">
Side bar
</div>
You are indeed correct that this is a feature of bootstrap :) You're also correct on using .col-xs-* to achieve your planned design. To add to what you're trying to do, (just in case you haven't tried this already) you can also combine the grid classes in order to accommodate the different screen sizes.
Here's an example:
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
Goodluck! :)
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:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Brand Title
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right"><!--original navbar-->
<li class="active">Home</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div><!--End Navbar Div-->
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Lorem ipsum</h4>
<p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
</div>
</div><!--end sidebar-->
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
Main Content
</div>
</div>
</div><!--end main content area-->
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.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
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.
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:
<div class="row flex-column-reverse flex-md-row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9">
main
</div>
</div>
Method 2 - Use order-first for xs screens:
<div class="row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9 order-first order-md-last">
main
</div>
</div>
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).
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
main
</div>
<div class="col-md-3 col-md-pull-9">
sidebar
</div>
</div>
</div>
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.
Bootstrap 3 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:
<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>
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/
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.
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
<div class='row no-gutters'>
<div class='col-12'>
A
</div>
<div class='col-12'>
<div class='row no-gutters'>
<div class='col-12 col-md-6'>
C
</div>
<div class='col-12 col-md-6 order-md-first'>
B
</div>
</div>
</div>
<div class='col-12'>
D
</div>
</div>
Demo: https://codepen.io/anon/pen/wXLGKa
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
<div class="container">
<h1>PUSH - PULL Bootstrap demo</h1>
<h2>Version 1:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 col-sm-push-3 green">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 2:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 3:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 cyan">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW XS-SMALL SCREEN
</div>
</div>
<h2>Version 4:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 beige">
MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
</div>
This is quite easy with jQuery using insertAfter() or insertBefore():
<div class="left">content</div>
<div class="right">sidebar</div>
<script>
$('.right').insertBefore('left');
</script>
If you want to to set o condition for mobile devices you can make it like this:
<script>
var $iW = $(window).innerWidth();
if ($iW < 992){
$('.right').insertBefore('.left');
}else{
$('.right').insertAfter('.left');
}
</script>
example
https://jsfiddle.net/w9n27k23/
Its very simple, write your html the way you would want it to be viewed in mobile. Then using the bootstrap order class you can arrange how you want it to viewed on desktop.
<html>
<head>
<title>Order View</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col order-md-2">
<h1>IMAGE</h1>
</div>
<div class="col order-md-1">
<h1>TEXT</h1>
</div>
</body>
</html>