css - Twitter Bootstrap: non-responsive row in responsive layout -

css - Twitter Bootstrap: non-responsive row in responsive layout -

i'm using responsive fluid grid scheme on site, , in cases responsive bootstrap behaviour want: on little screens, grid columns become fluid , stack vertically.

however, using grid nesting, within nested row not desired behaviour. there rows not supposed stacked vertically, regardless how little screen is. behaviour of whole grid when disable responsive css code, no alternative if responsive behaviour required outer rows.

the relevant markup is:

<div class="container-fluid"> <div class="row-fluid"> <div class="span6">this column should stacked on little devices.</div> <div class="span6"> <div class="row-fluid"> <div class="span6">nested row. column should not stacked on little devices.</div> <div class="span6">nested row. column should not stacked on little devices.</div> </div> </div> </div> </div>

see jsfidde clarification.

how 1 best solve problem? there way native bootstrap functions?

[class*="span"] .span6 { display: inline-block; width: 48.61878453038674%}

example: http://jsfiddle.net/nftq7/1/

css twitter-bootstrap