Column 1

This time, the html is more interesting than the css. (Make sure to change the javascript comments to html comments)

// script is tied to id=second1 inside the js
  <script src="side-by-side.js"></script>
  <div id="header">Same Page with a Responsive Design</div>
  <div class="container">
    <div class="row"> <!-- One row, 3 columns -->
      <div class="col-sm-6">
        <h3>Column 1</h3>
      <div> //end class col-sm-6
      <div class="col-sm-4" id="first-responsive">
        <h3>Column 2</h3>
      </div> //end class col-sm-4
      <div class="col-sm-2" id="second1">
        <h3>Column 3</h3>
      </div>//end class col-sm-2
    </div> //end class row
  </div> //end class container

This css relies on bootstrap, so to make it work we need a header
At a minimum, we need:
<link rel="stylesheet" href="../bootstrap.min.css">
and there is some minor style to define the three id's, header, first-responsive, and second1. These are only slightly different from the ones shown in Side by Side using only divs.

Column 2

Just put a few words in here so that we are absolutely sure that this area is independent of the green area.

Column 3