Bootstrap customizing responsive design

Bootstrap customizing responsive design

Let's say I have 3 div columns (span4 each) in a row and the last column
gets hidden when the screen is resized below tablet. When this happens, I
like to toggle the other 2 columns' div class to span6 so I don't see any
empty space from hiding it.
I am trying to control this from jQuery but I seem to miss out something.
$(function() {
var $resizable = $('.resize');
if($('.box') === prop(':hidden')) {
$resizable.toggleClass('span6');
}
}(jQuery));
Here is the JS BIN