Bootstrap GRID System possible?

Question

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!

Answer 1

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:

1. Develop mobile first by starting with the layout for small screens. You need to change the order of the sidebar and article <div> .

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

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

Answer 2

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>

Answer 3

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.