How to create two independently-scrollable columns in a responsive grid?

Question

I have a need to present a master-detail screen where the master and detail are each independently-scrollable, side-by-side columns in a responsive grid. When the browser width is reduced below some threshold, the two columns become stacked, with only a single full-page scroll.

Ideally, I'd like this to be done within twitter-bootstrap. It seems this should be simple?

Answer 1

I'd imagine you want something like this in Bootstrap with the .scrollable divs set to have "overflow:auto" on them.

Bootstrap will make then stack automagically at lower resolutions.

<div class="row-fluid">
    <div class="span6">
        <div class="scrollable"></div>
    </div>
    <div class="span6">
        <div class="scrollable"></div>
    </div>
</div>