title: Using Bootstrap affix while maintaining responsive column layout
body: <p><a href="http://www.bootply.com/DUIhvcWyBw" rel="nofollow">Please see this fiddle.</a> I have a main content div and a sidebar, which I want affixed to the top of the page as the user scrolls. Everything works fine, except for when viewed in mobile:</p>
  
  <p>Without the affix stuff, the columns behave as Bootstrap columns should and the sidebar falls into place directly below the main div. But with affix, the div simply disappears.</p>
  
  <p>I have sort of fixed this using a media query:</p>
  
  <pre><code>//Override affix on small screens:
  @media (max-width: 750px) {
      .affix {
          position: static;
      }
  }
  </code></pre>
  
  <p>This puts the div where it should be on small screens and reverts to the affix layout on Desktops. However, there is a void in the middle where it just disapears. As you drag the window in, around halfway it disapears, then repeareas in the correct position as the window is dragged smaller still. I've tried adjusting the <code>750px</code> value, but haven't been able to come up with a figure which actually works.</p>
  
  <p>How can I reconcile the grid layout and the affix switch on/off? How do I know where the breakpoint will be - should I avoid using a specific number of PX and take another approach to this issue?</p>
  
  <p>My current Bootstrap layout is (I've added the <code>height:500px</code> so you can see the scroll behaviour in JS Fiddle - it is not present in my actual code):</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row" id="content"&gt;
  
      &lt;div class="col-md-8" style="height:500px"&gt;
          Main content
      &lt;/div&gt;
  
      &lt;div class="col-md-4"&gt;
        &lt;div class="affix" data-spy="affix" data-offset-top="0"&gt;
          Side content
          &lt;/div&gt;  
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Many thanks</p>