Как отрегулировать строки в bootstrap при изменении размера окна?

Question

В основном у меня есть строки thumbnails. Когда экран имеет размер вниз (или отображается на планшетном компьютере), я хочу иметь строки миниатюры, а когда размер экрана до минимума (или отображается на телефоне), я хочу thumbnail за строку. Третий происходит сам по себе, но я не могу понять, как получить 3 строки из 2 столбцов. Визуализация:

Desktop (Что я имею)

[] [] []

[] [] []

Tablet (что я хочу)

[] []

[] []

[] []

Лучшее, что я могу получить

[] []

[]

[] []

[]

<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 

    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 

    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 

    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 

    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 
</div> 

Я не уверен, если есть даже способ сделать это в Bootstrap, который я так долго пытался.

Answer 1

Удалить средний ряд.

<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 

    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 

    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 

    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 

    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 

    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"></div> 
    </div> 
</div> 

Строка содержит Col-12, вы можете выбрать, как разделить 12,

3х4 = 12 = 1 строка с 3-х элементов

4 * 4 = 16 = 1 строка с 3 элементы и 1 с 1 элементом

Если вы переходите через 12, он переходит на новую «линию».

http://getbootstrap.com/css/#grid