1

I am trying to change the order of my sidebar and content areas on my page.

<div class="col-md-3">Sidebar</div>
<div class="col-md-9">Content</div>

I've a hefty amount of content in my sidebar and I would like the sidebar to show under the content area on mobile instead of content under sidebar.

I've searched a few questions and I cannot seem to get the solutions to this.

Alex Knopp
  • 907
  • 1
  • 10
  • 30
  • Possible duplicate of [How do I change Bootstrap 3 column order on mobile layout?](http://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout) – Alessio Cantarella Sep 27 '16 at 15:37
  • Tried these, they didnt work. Thanks anyway. – Alex Knopp Sep 27 '16 at 15:41
  • try this : http://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout – RohitS Sep 27 '16 at 15:48
  • Possible duplicate of [Reverse grid arrangment?](http://stackoverflow.com/questions/27924426/reverse-grid-arrangment) – tmg Sep 27 '16 at 16:15

2 Answers2

1

You can use the col-md-pull-* and col-md-push-* classes. You want to set the mobile order in your HTML directly, then use these classes to rearrange them for desktop, ie:

<div class="col-md-9">Content</div>
<div class="col-md-3 col-md-3-pull">Sidebar</div>
Aeolingamenfel
  • 2,399
  • 1
  • 15
  • 22
-1

whit that code should be work, but add those clases

  <div class="col-md-3 col-sm-12">Sidebar</div>
  <div class="col-md-9 col-sm-12">Content</div>
nperez9
  • 326
  • 1
  • 3
  • 8