Making a left sidebar appear under a right hand column on a mobile with bootstrap 3

Question

I have a layout where the sidebar is on the left. This isn't a problem on desktop browsers. However, when it's resized to mobile, the sidebar appears above the main column.

The problem is illustrated at http://bootply.com/89871

Does anyone know how to get them to swap? I'd prefer a CSS solution if possible.

Answer 1

There may be a better way to do this, but here is what I would do:

<div class="container">      <div class="row">       <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side hidden-sm">         Left (Side) - Move content to Partial View       </div>       <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main">         Right (Main) - Should be first when Mobile        </div>       <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side visible-sm">         Bottom - Load content from Partial VIew        </div>     </div>     </div> 

What I did:

1. Add a class hidden-sm and visible-sm to hide the first div and make the third div visible when it is a mobile device. You may want to change the classes to adjust for tablets if needed.
2. I would recommend moving the content of the left side bar to a partial view and then load that partial in both divs. This way you don't have duplicate content.

Update

This way is better:

<div class="container clearfix">      <div class="row">       <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main pull-right">         Right (Main) - Should be first when Mobile        </div>       <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side pull-left">         Left (Side) - Move content to Partial View       </div>     </div>     </div> 

What I did:

1. Add clearfix to container div since we are floating divs
2. Make the Right Content first in the markup
3. Add pull-right and pull-left to float the content where it should be

Answer 2

The cleaner approach would be using Bootstrap's native column ordering classes.

"Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes."

<div class="row">   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div> 

Will result in the left column appearing on the right and the right on the left.

Source: http://getbootstrap.com/css/#grid-column-ordering