title: How to implement responsive, independently scrolling panes in Bootstrap?
body: <p>I'm working on a web app for which I want to have two independently scrollable areas on larger screens: a main content area on the left, and a smaller sidebar on the right.</p>
  
  <p>I've managed to implement such a layout in CSS using <code>absolute</code> positioning and <code>overflow</code> properties, see this JSFiddle: <a href="http://jsfiddle.net/XLceP/">http://jsfiddle.net/XLceP/</a></p>
  
  <p>This is great, however I'm also attempting to make use of Bootstrap (3.1.1) in order to make the site responsive and for the components/styling. However I'm at a loss at how to do so.</p>
  
  <p>Basically, I'd ideally like to use Bootstrap conventions (the column classes etc.) to make it so that on mobile screens the right pane collapses below the left pane (or disappears entirely) for a conventional vertical layout, with both taking up the full width. However it seems impossible to do this while using <code>absolute</code> positioning for the larger screen layout.</p>
  
  <p>How can I attempt to tackle this problem?</p>