SO custom grid

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<div class="container">
    <div class="row-fluid">
        <div class="span12">span 12 A</div>
    </div>
    
    <div class="row-fluid">
        <div class="span6">span 6 B</div>
        <div class="span6">span 6 C</div>
    </div>
    
    <div class="row-fluid">
        <div class="span4">span 4 D</div>
        <div class="span4">span 4 E</div>
        <div class="span4">span 4 F</div>
    </div>
    
    <div class="row-fluid">
        <div class="span4">span 4 G</div>
        <div class="span4">span 4 H</div>
        <div class="span4">span 4 I</div>
    </div>
    
</div>

CSS

@media(min-width:481px) and (max-width:767px){
  
    .row-fluid [class*="span"]{   /* for the above viewpoints, force spans to be 50% */ 
    width:48.717948717948715%;
    float:left;
    display: inline-block;
    }

    .row-fluid .span12{    /* override so span12 is full width */
    width:100%;
    margin-right:0 !important;
    }

    
    .row-fluid [class*="span"]:first-child {
    margin-left: 0;
    margin-right: 2.5109110747408616%;  
    }

    .row-fluid [class*="span"]:last-child {
    float:right;
    }
 
}

/* for display purposes only */

.row-fluid [class*="span"]{
    background-color:#ddd;
    margin-bottom:2px;
}