Using Bootstrap affix while maintaining responsive column layout - html

Question

Please see this fiddle. 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:
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.
I have sort of fixed this using a media query:
//Override affix on small screens:
#media (max-width: 750px) {
.affix {
position: static;
}
}
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 750px value, but haven't been able to come up with a figure which actually works.
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?
My current Bootstrap layout is (I've added the height:500px so you can see the scroll behaviour in JS Fiddle - it is not present in my actual code):
<div class="container-fluid">
<div class="row" id="content">
<div class="col-md-8" style="height:500px">
Main content
</div>
<div class="col-md-4">
<div class="affix" data-spy="affix" data-offset-top="0">
Side content
</div>
</div>
</div>
</div>
Many thanks

Answer 1

I'm not clear on where you would like the Affix to be on mobile, either to the right of the content or beneath it, but I'll try to help:
In your Fiddle I am not seeing a point where the Affix momentarily disappears, but I do see it react as expected with the grid system classes. Ie: the col-md-* divs expand to 100% width at 992px.
The Media Query breakpoint for col-md-* is 992px. (Unless you have reset it in your copy of Bootstrap.)
If you would like to maintain the same width ratio that you have on desktop, I would suggest swapping out your classes from .col-md-* to .col-xs-*
So .col-md-8 becomes .col-xs-8 and .col-md-4 becomes .col-xs-4 -- but then your main content would be quite narrow on mobile.
Not sure if that's what you are going for?