javascript - Combine bootstrap rows on resize -

is there easy way combine 2 rows in bootstrap jquery based off user actions?

in app user moves slide bar , want 4x4 grid turn 3x3 grid. hers how i'm re sizing columns.

i cant figure out how reconfigure rows. i'm hoping there out there missed me.

$slider.slider({           max: 80,           step: 20,           min:0,           value:0,           orientation: 'horizontal',           range: 'min',           slide: function( event, ui ) {                 if(ui.value < 20){                   $(".cellsize").removeclass("col-md-4");                   $(".cellsize").addclass("col-md-3");                   $(".cellbutton").removeclass("btn-lg").addclass("btn-sm");                  }else if(ui.value >= 20 && ui.value < 40){                    $(".cellbutton").removeclass("btn-sm").addclass("btn-md").removeclass("btn-lg");                   $(".cellsize").removeclass("col-md-3");                   $(".cellsize").addclass("col-md-4");                   $(".cellsize").removeclass("col-md-5");                 }else if(ui.value >= 40 && ui.value < 60){                    $(".rowcell2").addclass("row")                     $(".rowcell").removeclass("row")                   $(".cellbutton").removeclass("btn-md").addclass("btn-lg").removeclass("btn-block");                   $(".cellsize").removeclass("col-md-4");                   $(".cellsize").addclass("col-md-5");                   $(".cellsize").removeclass("col-md-6");                 }else if (ui.value >=60 && ui.value < 80){                   $(".cellbutton").removeclass("btn-lg").addclass("btn-block");                    $(".cellsize").removeclass("col-md-5");                    $(".cellsize").addclass("col-md-6")                    $(".cellsize").removeclass("col-md-12");                 }else{                    $(".cellsize").addclass("col-md-12")                    $(".cellsize").removeclass("col-md-6");                  }               }         }).addslidersegments(); 

my attempts far have been try delete rows depending on current size of columns.

update html, i'm using django template language. can post html printed if needed.

           <div class = "col-md-12">                             {% card in cards %}                                 {%if forloop.counter0|divisibleby:4%}                                       {%if forloop.counter0 != 0%}                                            </div>                                        {%endif%}                                        <div class = "row">                                 {% endif %}                                 <div class = " cellsize col-md-3 ">                                   <div id =  "cell{{card.id}}">                                     <ul class="list-group   " id = "cellwidth{{card.id}}">                                         <!--- ommited --->                                      </ul>                                   </div>                                 </div>                                                               {%endfor%} 

`

unfortunately, there no simple way using bootstrap. you'd have write custom logic yourself, isn't worth considering there's several libraries out there well. should check out isotope or masonry, both of i've used in past , want few lines of javascript.