SO jQuery animate widths - responsive

SO jQuery animate widths - responsive

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="container openLeft">

    <div class="row">
        <div class="span12">
            <p class="closeLeft"><button class="btn btn-large" type="button" id="closeTrigger">Close 'Em</button></p>
            <p class="openLeft"><button class="btn btn-large" type="button" id="openTrigger">Open 'Em</button></p>

        </div>
    </div>
    <div class="row">
        <div class="span3 to-hide">
            left
        </div>
        <div class="span9 to-enlarge">
            right</div>       
    </div>
</div>

CSS

.container{
    overflow:hidden;
    color:black;
  background-color:#ffc;
}

/*.to-hide {
    background-color: #999;  
}  set in media requests */

.to-enlarge {
    background-color: #ccc;
}

.container.closeLeft p.closeLeft{
    display:none;}
.container.openLeft p.openLeft{
    display:none;}



/* -----------------*/
/* @media requests  */
/* -----------------*/

@media (max-width: 480px) {
    
    .to-hide {
    background-color: black;  
    }
 
   .closeLeft .span3{
    opacity:0;
    filter:alpha(opacity=0); /* For IE8 and earlier */  
    /*margin-left:-480px;*/
    /*width:0px;*/
    height:0px;
    overflow:hidden;
    }

    .closeLeft .span9{
    width:100%;
    }

   .openLeft .span9{
    width:100%;
    }
}


@media (min-width: 481px) and (max-width: 767px) {
    
    .to-hide {
    background-color: YellowGreen;
    }
   
    .closeLeft .span3{
    opacity:0;
    filter:alpha(opacity=0); /* For IE8 and earlier */  
    margin-left:-767px;
    width:0px;
    overflow:hidden;
    }

    .closeLeft .span9{
    width:100%;
    }

   .openLeft .span9{
    width:100%;
    }

}


@media (min-width: 768px) and (max-width: 979px) {
    
    .to-hide {
    background-color: Tomato;
    }
    
    .closeLeft .span3{
    opacity:0;
    filter:alpha(opacity=0); /* For IE8 and earlier */  
    margin-left:-170px;
    overflow:hidden;
    }

    .closeLeft .span9{
    width:100%;
    }

   .openLeft .span9{
    width:width: 74.46808510638297%;
    }
}


@media (min-width: 980px) and (max-width: 1199px) {
    
    .to-hide {
    background-color: Orange;  
    } 
    
    .closeLeft .span3{
    opacity:0;
    filter:alpha(opacity=0); /* For IE8 and earlier */  
    margin-left:-480px;
    width:0px;
    overflow:hidden;
    }

    .closeLeft .span9{
    width:100%;
    }

   .openLeft .span9{
    width:width: 74.46808510638297%;
    }
}


@media (min-width: 1200px) {
 
    .to-hide {
    background-color:SkyBlue !important;
    }

    .closeLeft .span3{
   ...

JavaScript

$("#closeTrigger").click(function() {
    
$('.container').removeClass('openLeft').addClass('closeLeft');  
    });

$("#openTrigger").click(function() {
    $('.container').removeClass('closeLeft').addClass('openLeft');  
    });