Bootstrap bug causes "This Page" div to be placed wrong

[mdlinville]

The Bootstrap grid needs to add up to 12 at every screen resolution, but it adds up to 14 in medium and larger sizes currently. You can read more about the Bootstrap grid at http://v4-alpha.getbootstrap.com/layout/grid/.

Basically, within a

, all child divs have a class that corresponds to how much of the row they should take up at xs, s, md, lg, and xl resolutions. Here we have:

<div class="row">
  <div class="col-xs-12 col-sm-3 col-md-2 docsidebarnav_section">...</div>
  <div class="col-xs-12 col-sm-9 col-md-10">...</div>
  <div class="hidden-xs hidden-sm col-md-2 tableofcontents_section">...</div>
</div>

On xs sizes (phones, let's say), the first two divs each take the full amount of space (they stack vertically) and the third one is hidden.

On s sizes (large tablets or laptops), the first div takes 3/12 and the second takes 9/12. The third one is still hidden.

On md sizes (large laptops or more conventional monitors, perhaps), the first takes 2/12, the second takes 10/12, and the third takes 2/12. 2+12+2 = 14 > 12, so the third div falls off. The fix is to reduce the middle div to 8/12.

We don't currently specify lg or xl sizes right now, so they will use the md specifications. In my PR, I'll also add an xl size that makes the third column narrower to take advantage of super wide screens.

If we wanted the ability to hide one or both of the menus, we'd just add a toggle button that used Javascript to add or remove classes to the relevant div.