title: Bootstrap 3 Tablet Portrait size makes columns overlap
body: <p>I am building a calendar that uses the <code>bootstrap</code> grid system. Currently I am using <code>col-sm-9</code> for the right columns, and <code>col-sm-3</code> for the left. This works great, until I size down to what I think tablet portrait would be (right before it breaks to the phone layout).</p>
  
  <p>When this happens, the right column overlaps the left, and I cannot figure out why. </p>
  
  <p><img src="https://i.stack.imgur.com/55Ent.png" alt="enter image description here"></p>
  
  <p>Link to calendar: <a href="http://www.puc.edu/dev-calendar" rel="nofollow noreferrer">http://www.puc.edu/dev-calendar</a></p>
  
  <p>Does anyone have an idea what is causing this? Should I instead add some larger breakpoints and adjust the <code>col-sm-*</code> to something like 4 and 8?</p>