How to implement responsive, independently scrolling panes in Bootstrap 3?

Update 2019

Bootstrap 4

Now that Bootstrap 4 uses flexbox, you can this layout using flex-grow and the new overflow utility classes. This minimizes the extra CSS that was needed before in BSv3...

<div class="container-fluid d-flex flex-column flex-grow-1 vh-100 overflow-hidden">
    <nav class="navbar navbar-light bg-light navbar-expand-md px-0 flex-shrink-0">
        <a class="navbar-brand" href="#">App</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Nav</a></li>
        </ul>
    </nav>
    <div class="row flex-grow-1 overflow-hidden">
        <div class="col-2 mh-100 overflow-auto py-2">
            <h6>Sidebar</h6>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
        <div class="col mh-100 overflow-auto py-2">
            <h3>Body content</h3>
        </div>
    </div>
    <div class="row flex-shrink-0 bg-light">
        <div class="col-12 py-2">
            <p>Footer ...</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/LIaOWljJm8

Bootstrap 3 (original answer)

You can use a CSS media query to "disable" the absolute positioning on mobile screens. This will let Bootstrap's responsiveness kick in...

@media (min-width: 768px){
  #left {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    width: 75%;
    overflow-y: scroll; 
  }

  #right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    width: 25%;
  }
}

Demo: http://www.bootply.com/126137

I forked Skelly's bootply here while using col-xs-12 and hidden-xs.

  <div class="col-xs-12 col-sm-6" id="left">
      <p>Left contents</p>
  </div>   
  <div class="hidden-xs col-sm-6" id="right">
      <p>Right contents</p>
  </div>

I prefer this because it avoids media queries in a css file.

You don't need Bootstrap to do what you want. You can simply modify your existing CSS to following:

#left {
  float: left;
  width: 75%;
  height: 100px;
  overflow-y: scroll;
  background-color: #FC6E51;
  text-align: center;
}

#right {
  float: left;
  overflow-y: scroll;
  height: 100px;
  width: 25%;
  background-color: #4FC1E9;
  text-align: center;
}

And then, in your media query for mobile screens, make both #left and #right flow:none, width: 100% and height: auto;

If you really want to use Bootstrap, just put both #left and #right in the following structure:

<div class="row">
    <div class="col-md-8" id="left">Your Code Here</div>
    <div class="col-md-4" id="right">Your Code Here</div>
</div>