Как сверстать такое на bs4?

Question

[Андрей Никифоров]

Начал изучать bs4, но столкнулся с проблемой адаптацией, как правильно будет сверстать такое ?

https://codepen.io/delorean88/pen/ZyjpvO

на bs4 ? выходит такая вот каша если опираться на документацию, https://codepen.io/delorean88/pen/pwVMWE

Изучая бс4 думал будет проще, а двигать различными offsetами мне не хочется как в документации предлагается, хотелось бы сделать всё тру, правильно и без лишних отступов вокруг col-*, использовать все возможности фреймворка и flex )

Answer 1

[alvvi]

Не знаю, на какую документацию вы опирались, в бутстрапе 4 все работает так же, как и в бутстрапе 3, нужно было лишь исправить изначальный вариант и сместить брейкпоинт.
https://codepen.io/Alvvi/pen/PjBmPY

Comments

[Андрей Никифоров]

а как сместить последние два блока вправо ?

[alvvi]

Андрей Никифоров: обновил

[Андрей Никифоров]

Илья Ростопка: а как сделать не ограничивая ширину блоков? не col-*-, чтобы типа col col col и все располагается на всю ширину ? в этом весь плюс ведь флексов

[alvvi]

Андрей Никифоров: не совсем понимаю, что вы имеете в виду. col-*- содержат значения flex-basis, что необходимо для расстановки по сетке. Если вам оно не нужно, оставьте только col, они будут вести себя как обычный флекс элемент.

[Андрей Никифоров]

Илья Ростопка: почти что получил то что мне нужно, https://codepen.io/delorean88/pen/pwVMWE

как адаптировать теперь колонки ?

Answer 2

[simka alien]

я bs4 и даже bs1-3 не знаю и знать не хочу , но css это делается так : https://codepen.io/simkaUser/pen/OgwpwY на основе вашего примера , посмотрите каким надо элементам это сделать и сделайте , так как я там общее сделал