jquery mobile js include is overwriting bootstrap css - how do I fix? - jquery-mobile

Question

I'm working on a Pyramid (python) web application, and trying to create a responsive-ish design that will gracefully switch between a desktop-sized browser and a mobile browser. I'm wanting to use Twitter Bootstrap for the desktop UI and jquery mobile for the mobile UI.
My CSS is like this:
#charset "utf-8";
#import url("http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css") (max-width: 480px);
#import url("css/bootstrap.min.css") (min-width: 481px);
This actually seems to be working well in switching styles on the fly as the window resizes. If it's a larger window, it shows my desktop UI styles, and once it hits the "mobile" threshold it shows the jquery mobile UI. Sweet.
My problem appears to be in my HTML/mako template, though. I've placed my .js includes at the bottom of the page. The important snippet is:
[...snip..]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>
I have radio buttons with labels on the desktop UI like so:
<label>
<input type="radio" name="answer" id="1" value="1"> 1</label>
<label><input type="radio" name="answer" id="2" value="2"> 2</label>
<label><input type="radio" name="answer" id="3" value="3"> 3</label>
<label>
<input type="radio" name="answer" id="foo" value="foo">foo
</label>
When all .js includes are active, the actual radio input control is not inline with the label text; instead it appears to be set as a block element and is appearing onscreen on its own line after the label. I've tried tweaking the CSS to override the radio input styles but the best I can get so far is setting the radio type to inline but it's still appearing after the label, instead of before.
Buuuut, if I comment out the jquery mobile .js include:
[...snip...]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>-->
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>
then the desktop UI looks correct. Of course at that point I've lost my jquery mobile UI.
So what seems to be happening is something in the jquery mobile javascript is overriding the style includes, but I don't know what or why. Is there a way I can force things to not run the jquery mobile stuff at larger resolutions? Any help or hints?

Answer 1

You may need to disable jquery mobile for these input fields:
from http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.html :
if you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:
<label for="foo">
<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>