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

Question

I need to transform the grid that you see above to grid that you see below. For above I use next grid:

 100  100  100  100  100  100   

Всего для 2 столбцов мы можем заменить col-md-2 на col-md-6, но у меня более сложный порядок

Answer 1

Легко. Вы можете использовать Bootstrap flexbox классы служебных программ .

.col-6 класс даст вам макет с двумя столбцами до точки останова md. После этого класс .col-md-2 предоставит вам макет из 6 столбцов.

HTML

<div class="row">
    <div class="col-6 col-md-2 order-md-6">
        6
    </div>
    <div class="col-6 col-md-2 order-md-2">
        2
    </div>
    <div class="col-6 col-md-2 order-md-1">
        1
    </div>
    <div class="col-6 col-md-2 order-md-4">
        4
    </div>
    <div class="col-6 col-md-2 order-md-3">
        3
    </div>
    <div class="col-6 col-md-2 order-md-5">
        5
    </div>
</div>

Скриншоты

Demo

https://jsfiddle.net/davidliang2008/0f2qowre/5/