I have devices that can have 1 of 3 different screen sizes - 800 x 392, 1024 x 544, 1280 x 725.
Currently we use different css files to use when the screen size definition is pulled from the HTTP header when hitting our web application. I want to switch over to Bootstrap to unify the look of our applications but also to do one css definition instead of 3. When I load up this bootstrap example - http://getbootstrap.com/examples/grid/ on my browser and resize for the different widths I get results I like. 800px width one shows like a mobile display (stacked grid) and the others show like columns....When I load up onto the device all three load up in mobile format (800px look). Is this because the device browser is identified as a mobile browser (Netfront 3.5) or is it that some javascript is not loading correctly?
Excuse my knowledge of bootstrap as it's a bit limiting until I read more and more. I am trying to do a proof of concept before we dive in head first as the framework we use for our device UI....help please.
EDIT - http://getbootstrap.com/examples/non-responsive/ displays correctly on the devices with columns.
The top 3 examples on the link you provided use "medium" columns. It means that any browser window under 992px will display the columns stacked up on top of each other. As I understand it, Bootstrap doesn't really pay attention to the device when it displays columns, it only worries about window size. Do the examples further down the page look correct on your mobile device? Those are using the "small" and "extra small" column break points and should act as columns on smaller devices.
EDIT: You can also customize the breakpoints in bootstrap, so you can customize them to fit your app sizes - 800, 1024, 1280.