html - Using Bootstrap affix while maintaining responsive column layout -

please see fiddle. have main content div , sidebar, want affixed top of page user scrolls. works fine, except when viewed in mobile:

without affix stuff, columns behave bootstrap columns should , sidebar falls place directly below main div. affix, div disappears.

i have sort of fixed using media query:

//override affix on small screens: @media (max-width: 750px) {     .affix {         position: static;     } } 

this puts div should on small screens , reverts affix layout on desktops. however, there void in middle disapears. drag window in, around halfway disapears, repeareas in correct position window dragged smaller still. i've tried adjusting 750px value, haven't been able come figure works.

how can reconcile grid layout , affix switch on/off? how know breakpoint - should avoid using specific number of px , take approach issue?

my current bootstrap layout (i've added height:500px can see scroll behaviour in js fiddle - not present in 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

i'm not clear on affix on mobile, either right of content or beneath it, i'll try help:

in fiddle not seeing point affix momentarily disappears, see react expected grid system classes. ie: col-md-* divs expand 100% width @ 992px.

the media query breakpoint col-md-* 992px. (unless have reset in copy of bootstrap.)

if maintain same width ratio have on desktop, suggest swapping out classes .col-md-* .col-xs-* .col-md-8 becomes .col-xs-8 , .col-md-4 becomes .col-xs-4 -- main content quite narrow on mobile.

not sure if that's going for?