SO custom responsive row

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row-fluid">
    <div id="myspan1" class="span12 marker">span12</div>
    <div id="myspan2"class="hide" >hide meddddddd</div>
</div>

<div class="row-fluid">
    <div id="myspan1" class="hide">hide me</div>
    <div id="myspan2" class="span12 marker">span12</div>
</div>
    
<div class="row-fluid">
    <div id="myspan1" class="hide">hide me</div>
    <div id="myspan2" class="span6 marker">span6</div>
     <div id="myspan2" class="span6 marker">span6</div>
</div>
    
<div class="row-fluid">
    <div id="myspan1" class="hide">hide me</div>
    <div id="myspan2" class="span3 marker">span3</div>
     <div id="myspan2" class="span3 marker">span3</div>
    <div id="myspan2" class="span3 marker">span3</div>
     <div id="myspan2" class="span3 marker">span3</div>
</div>

<div class="row-fluid">
    <div id="myspan1" class="span6 marker">span6</div>
    <div id="myspan2" class="span6 marker">span6</div>
</div>
    
<div class="row-fluid">
   <div id="myspan2" class="span3 ">default span3 grid</div>
   <div id="myspan2" class="span3 ">default span3 grid</div>
   <div id="myspan2" class="span3 ">default span3 grid</div>
   <div id="myspan2" class="span3 ">default span3 grid</div>
</div>

    
</div><!-- end container -->

CSS

@import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css");

.row-fluid{
    min-height:100px;
    margin-bottom:10px;
}

[class*="span"]{
    background-color:#aaa;
}


/* by default, remove left-hand margin on all spans of class .marker */

.row-fluid > [class*="span"].marker{  
    margin-left:0;
    background-color:pink;
}



/* restore default left hand margin on all but the first span of class .marker */

.row-fluid > [class*="span"].marker ~ [class*="span"].marker{
    margin-left: 2.127659574468085%;
    background-color:pink;
}


/* since this is a responsive example, tweak the left margin at different viewports */

@media (max-width: 979px) and (min-width: 768px){
    .row-fluid > [class*="span"].marker ~ [class*="span"].marker{
    margin-left: 2.7624309392265194%;
}
}

@media (min-width: 1200px){
    .row-fluid > [class*="span"].marker ~ [class*="span"].marker{
    background-color:pink;
    margin-left:2.564102564102564%;
}
}


@media (max-width: 767px){
    .row-fluid > [class*="span"].marker ~ [class*="span"].marker{
    background-color:pink;
    margin-left:0;
}

}