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.

Solution

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%;
}