Stackoverflow - remove mobile break
nested spans can vary, all spans can vary
by panchroma
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container-fluid">
<div class="row-fluid">
<div class="span8 outer">
<div class="row-fluid">
<div class="inner">
<div class="span2">1</div>
<div class="span2">2</div>
</div><!-- end inner -->
<div class="inner">
<div class="span1">1a</div>
<div class="span1">2a</div>
</div><!-- end inner -->
<div class="inner">
<div class="span1">1b</div>
<div class="span1">2b</div>
</div><!-- end inner -->
<div class="inner">
<div class="span2">1c</div>
<div class="span2">2c</div>
</div><!-- end inner -->
</div> <!-- end nested fluid-row -->
</div><!-- end outer -->
<div class="span4 outer">
<div class="row-fluid">
<div class="inner">
<div class="span6">3</div>
<div class="span6">4</div>
</div><!-- end inner -->
</div><!-- end nested row -->
</div><!-- end outer -->
</div><!-- end parent row -->
</div><!-- end container -->
CSS
.outer {
border: 1px solid #000000;
}
.inner .span6, .inner .span1, .inner .span2{
border: 1px solid red;
}
@media (max-width: 767px){
[class*="span"] .inner [class*="span"] {
width: 48.93617021276595%;
float:left;
}
[class*="span"] .row-fluid [class*="span"]:first-child {
margin-right: 2.1%;
}
}
@media (max-width: 979px) and (min-width: 768px){
.inner [class*="span"]:first-child {
margin-left: 2.1%;
}
.row-fluid [class*="inner"]:first-child [class*="span"]:first-child {
margin-left: 0%;
}
}