Bootstrap: show/hide column divs with checkbox and change column span

I'm using Bootstrap 3.2. I'm trying to figure out if there's a way to show/hide a "col-sz-#" div AND change the "col-sz-#" class in visible divs to resize them to fit the container using checkbox style buttons for each column.

For example, if I start with

<div class="row">
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
</div>

Then if hide 2 of them and the others resize:

<div class="row">
    <div class="col-md-2 hidden">...</div>
    <div class="col-md-2 hidden">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
</div>

if the total columns can't divide 12 evenly like 5, then it wouldn't change.

You can do this:

<!-- language: lang-js -->

var $myCols =  $("#myColumns");

$("#toggleColumns input").change(function() {
    var index = +this.value - 1;
    var visible = this.checked;
    
    $($myCols.children().get(index)).toggle(visible);
    
    resizeColumns();
});

function resizeColumns() {
    var visibleCols = $myCols.children(":visible").length;
    
    var div = Math.floor(12 / visibleCols);
    var rem = 12 % visibleCols;
    
    var colSize = (rem === 0) ? div : 2;
    
    $myCols.children().removeClass().addClass('col-md-'+colSize);
    
}

Demo in jsFiddle

UPDATE:

If you want to act on multiple identical rows, just find all of them with a selector and call a function on each row:

<!-- language: lang-js -->

$(".resizeRow").each(function(){
    var $eachRow = $(this);
    // Do Stuff
});

Updated Fiddle