Bootstrap 3 disable responsive for desktop window resize

Question

bootstrap 3 works on the mobile first approach. so my desktop css is dependant on my css for smaller devices. I would like to disable responsiveness when the desktop browser window resizes but cant figure out how. I was directed to http://getbootstrap.com/getting-started/#disable-responsive which solved half the problem.

the width of the page issue has been fixed by the following

var desktop = screen.availWidth >= '768';
if(desktop)
{
  l=d.createElement('link');
  l.rel  = 'stylesheet';l.type = 'text/css';
  l.href = 'styles/desktop.css';
  l.media = 'all';
  h.appendChild(l);

}

desktop.css

.container{
    max-width: none !important;
    width:970px;}

but it is still re-flowing my content because bootstrap is still picking up my column classes when the browser window resizes to the respective media query. eg col-sm-4, col-sm-offset-4. i could use javascript to change the col-sm to col-xs when it detects a desktop but offsets and column ordering are disabled for extra small devices.

would i have to write my own css overiding all unwanted boostrap?

http://jsfiddle.net/zVAEe/

please, any suggestions would be greatly appreciated.
thank you in advance.

Answer 1

Yes, you need to rewrite some of the CSS in desktop.css. This is pretty easily done as you could copy CSS from bootstrap's CSS file and just redefine what you want.

I checked you jsfiddle. Add this CSS to desktop.css and it works:

.col-sm-4 {
    width: 33.33333333333333%;
    float: left;
}

.col-sm-push-4 {
    left: 33.33333333333333%;
}

.col-sm-pull-4 {
    right: 33.33333333333333%;
}