Как выровнить по вертикали два блока между собой?

Question

[Raul Abdullin]

Нужно сверстать, как на картинке (прикрепляю), т.е. левая и правая часть были выровнены по вертикали по центру.
Сделал с помощью display: flex; align-items: center; Всё ок, но при этом, если начинаю уменьшать размер браузера, вижу, что бутстрап сетка перестала работать. Вопрос в том, как поступить в моем случае, чтобы и сетку сохранить и выровнить по центру по вертикали? Код https://jsfiddle.net/pqvozbbq/1/

Comments

[Сергей delphinpro]

display: flex; flex-wrap: wrap; align-items: center;

[Raul Abdullin]

Сергей, сделал take.ms/shACD но теперь ширина этих элементов всё равно не корректно работает, т.е. сетка бутстрап не работает

[Сергей delphinpro]

raulvodov, у вас пример на фиддле некорректный. сделайте нормально, подключите бустрап, посмотрим, что там не сходится.

Answer 1

[Яна Митрофанова]

Поставьте display: block после 992 px. У вас по сетке блоки должны будут растянуться на 100% после отметки в 992 px, думаю там уже вертикальное выравнивание не нужно, соответственно и display:flex тоже

Comments

[Raul Abdullin]

спасибо большое, а как считаете, в моем случае выравнивать блоки по центру с помощью флексов хорошее решение или лучше было бы как-то по-другому это делать?

[Яна Митрофанова]

С помощью флексов это было самое простое и быстрое решение из возможных)

Answer 2

[Амир Алимжанов]

Попробуй сетку Bootstrap 4, там на флексах