0

I have full-width template with a sidebar at the left. Main content area is wrapped in <div class=row><div class=col-lg-12>. I want to add "Search" button and if user clicks it then a full-height search sidebar should appear at the right side with col-3 size. Also main content area should shrink to col-9. Of course, I can do it with javascript by toggling necessary classes on divs. But in this case search panel will show under the main content on small devices. But I need to show it above main content. Again, wide screen - sidebar must show at the right with col-3, small screen - sidebar must show in full width above the main content. Is it possible?

WindBridges
  • 693
  • 2
  • 11
  • 23
  • http://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout Check out the answser for this question – Mark Ni Nov 13 '14 at 12:38
  • Thank you, it seems like it is exactly what I'm looking for. This solves the problem with div order, but I still toggle col-classes and visibility of sidebar with javascript. May be there exists more elegant solution? For example, I'd like to show sidebar div on click and content area shrinks automatically. – WindBridges Nov 13 '14 at 13:02
  • Instead of write `col-lg-12` for main, try nothing. Div block will auto expand if width is not set. – Mark Ni Nov 13 '14 at 13:43
  • Unfortunately, it doesn't shrink without col-lg-9 when sidebar is not hidden. It simply takes full width and makes sidebar to go to the next row. – WindBridges Nov 13 '14 at 15:41

0 Answers0