Make bootstrap non-responsive Not using col-xs - html

Question

I want to make website non-responsive, but using col-md, col-lg and col-sm, it have to be non-responsive and ignore #viewport ( browser resize ) width , but have to be responsive on mobile and tablets.
I need to use col-md , sm, lg to make it responsive on mobile and tablets, but my website collapses depending on Browser #viewport because of I can't use col-xs for all columns.
Is it a possible thing to sort out ?
Thanks

Answer 1

Do something like this,
<script type="text/javascript">
$( document ).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );
}
});
</script>
You'll have to load jQuery. In head tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 2

Try this:-
#media screen and (min-width:768px){ /* or whatever width you prefer for min-width of desktop view */
.container{
min-width:970px; /* or whatever width you prefer for desktop view */
width:970px; /* or whatever width you prefer for desktop view */
}
}
What it should do is, it will not resize the container until the screen is 768px wide. You can change this media screen min-width as per your requirement. Once the device or browser's with reduces beyond 768px, it will start the responsiveness automatically.
Above CSS is just an example. You don't need any JavaScript to deal in your situation.
Hope it helps.

Answer 3

I would load or not load responsive styles based on whether or not it's a touch device. The styles for mobile should be just the site with responsive css. Then a duplicate of that is used for non-touch devices but bring your columns out of the min-widths and set a width on your container. There's other ways of doing this, like loading another css file if it's touch and just keeping the desktop styles for all device, but the css for responsive is loaded after the desktop so that it is the last in the order.
MINI DEMO: http://jsbin.com/wuqita/1/edit
/* __________________ SUPPORTS TOUCH OR NOT __________________*/
/*! Detects touch support and adds appropriate classes to html and returns a JS object | Copyright (c) 2013 Izilla Partners Pty Ltd | http://www.izilla.com.au / Licensed under the MIT license | https://coderwall.com/p/egbgdw */
var supports = (function() {
var d = document.documentElement,
c = "ontouchstart" in window || navigator.msMaxTouchPoints;
if (c) {
d.className += " touch";
return {
touch: true
};
} else {
d.className += " no-touch";
return {
touch: false
};
}
})();
$(document).ready(function () {
if ($('html').hasClass('touch')) {
$('#desktopcss').prop('disabled',true);
}
if ($('html').hasClass('no-touch')) {
$('#responsivecss').prop('disabled',true);
}
});
CSS files linking and ids:
<link id="responsivecss" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link id="desktopcss" href="//bombdiggitydesign.com/jsbin/test.css" rel="stylesheet" type="text/css" />