Число столбцов в строке в ответной сетке

Question

Есть ли способ определить, сколько столбцов находится в каждой строке? На основе отзывчивого видового экрана и без изменения html.

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div> 
    <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
    <div class="col-xs-6 col-sm-10">.col-xs-6 .col-sm-10</div> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
    <div class="col-xs-6 col-sm-4 col-lg-10">.col-xs-6 .col-sm-4 col-lg-10</div> 
    <div class="col-xs-6 col-sm-4 col-md-2">.col-xs-6 .col-sm-4 col-md-2</div> 
</div> 

например: число столбцов каждой строки

Default (XS) 
1 
2 
2 
2 

Medium 
2 
1 
1 
3 

Large 
2 
1 
1 
1 
2 

Пример большое окно просмотра с 5 строк https://codepen.io/anon/pen/JGwdmO

Answer 1

Я считаю, что нет никакого способа '' стоимость его. Что приходит на ум:

var columns = [1, 2, 2, 2]; // default 

var viewportWidth = $(window).width(); 

if (viewportWidth >= 1200){ // large 
    columns = [2, 1, 1, 1, 2]; 
} 
else if (viewportWidth >= 992) { // medium 
    columns = [2, 1, 1, 3]; 
} 

Чтобы ответить на события Изменить размер окна, вы можете подписаться на

$(window).resize(function() { 
    ... 
});