Responsive design - how can I dynamically re-size a column ?

[reversible]

Hi folks, 
I have the following snippet which works fine for a desktop:
    
  <div class="row-fluid media-container">
        <div class="span4 "> </div>   
        <div class="span4 "> </div> 
        <div class="span4 "> </div> 
   </div>

the goal is to disable the third div inside the row when I am in a tablet, 
so I did something like this

<div class="row-fluid media-container">
        <div class="span4 "> </div>   
        <div class="span4 "> </div> 
        <div class="span4 hidden-tablet"> </div> 
   </div>

I ended up with two divs with the span4 class, this is causing a white 
space in my layout, what I really want is that the two first divs takes 50% 
and 50%, in oder words I would like to end up with something like this

<div class="row-fluid media-container">
        <div class="span6 "> </div>   
        <div class="span6 "> </div> 
   </div>

do you know where can I find a clean approach for this? is it better to 
override the CSS rules or just change the span class using JS?

thanks