css - How can I prevent overlap of two "spanX" divs when shrinking the screen in Bootstrap? -

css - How can I prevent overlap of two "spanX" divs when shrinking the screen in Bootstrap? -

i using responsive layout of twitter bootstrap 2.3. have span9 row-fluid div containing 2 span4 divs.

to test fluidity of screen, i'm shrinking window. there comes specific point @ right span4 overlaps left span4. if maintain shrinking window, stack appropriately. want stack appropriately before overlapping. functionality want built bootstrap , i'm not doing right?

any help appreciated of course!

maybe double check using bootstrap responsive css , there isn't blip in html. i'm not clear on layout, here's working illustration of close : http://jsfiddle.net/panchroma/rmumw/

html

<div class="container"> <div class="row-fluid"> <div class="span9"> <div class="row-fluid"> <div class="span4"> nested span4 </div> <div class="span4"> nested span4 </div> <div class="span4"> nested span4 </div> </div> <!-- end nested row --> </div> <!-- end span9 --> <div class="span3"> span 3 </div> <!-- end span3 --> </div><!-- end row --> </div> <!-- end container -->

good luck!

css twitter-bootstrap