Как сверстать на bootstrap нестандартные колонки?

Question

[Arris1]

Добрый вечер!
Прошу прощения, если тема стара.

Хотел бы решить вопрос использования бутстрапа на нестандартных макетах, прошу оценить верен ли ход моих мыслей или может делать нужно все не так.
Просьба указать решение именно для бутстрапа.

Имеем 4 колонки не подходящие под стандартную 12-колоночную систему бутстрапа.
Более того, колонки разные по ширине, например, 300px 400px 260px 260px. Нужно разместить их в сетку, чтобы вели себя на мобиле как надо - вставали вертикально одна над другой.

Как я вижу решение на бутсрапе:

1. генерим три разных бутстрап сетки (для 1 колонки свою сетку, для 2 свою и общую для 3,4 колонок) с нужными размерами. Такое решение видел на тостере, например, для 5 колонок - генерят сетку другую.
2. подгоняем медиа-запросы для сворачивания на мобиле для каждой сетки к одному значению.
Теперь вроде все должно работать.
3. три файла бутстрап объединяем в bootstrap.min.css для сжатия

Просьба указать верное ли решение, либо предложить свое, спасибо.

Comments

[EEclipsEE]

а не проще ли будет взять не 12 колоночную систему бутсрапа? сейчас ведь можно его кастомизировать на 36 колонок и т.д. (вроде как любое количество). и тогда с большим разбиением можно будет сделать 4 колонки нужных размеров и при этом у вас все таже одна сетка и с ней проще работать.

[Иван]

Не использовать бутстрап,а flexbox +ручки

[Arris1]

Иван, это понятно, пока интересует бутстрап

[Ankhena]

Arris1, что за дикие желания использовать инструмент ради инструмента, там где он не очень удачно подходит?

[Arris1]

Ankhena, простые желания новичка) И квалификации различить, что "не подходит", а не "не умею" не хватает

[Arris1]

EEclipsEE, попробовал, да это как вариант! спасибо

[EEclipsEE]

Arris1, на здоровье!

Answer 1

[zoozag]

Вы бы на написание собственных стилей для 4 колонок потратили меньше времени чем на написание этого вопроса.
Иван верно пишет

Не использовать бутстрап,а flexbox +ручки