Егор Живагин

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

Что такое "отказаться от float" ?

Конечно, есть смысл перестать использовать флоаты для общей разметки страниц. Они не для этого изначально

Float стоит использовать по назначению - для обтекания

Для гамбургера margin-left: auto; не?

Можно сделать один общий блок на всех со стилем

align-items: flex-start;
display: flex;

И в него положить эти 3 блока. А цвет и размер задавать непосредственно им.
Вес двигать через self-align или тем же margin-ом

БЭМу плевать на flex, нет? БЭМ же не про то, как отображаются элементы

Конечно, лучше поддерживать единообразие, но ничего особенно страшного в этом нет

Если надо поддерживать IE 10 - --- не юзаем флекс
Если не надо --- юзаем

Всё от конкретного ТЗ зависит

https://habrahabr.ru/post/313938/

Что за холивар?) Это дело удобства же. Хотите - юзайте, хотите - нет. Тот же бутстрап мне, например, не нравится, в своих проектах я почти не использую css-фреймворки. Разве только для прототипов

Тк justify-content: center; и отступы между блоками руками ( в % или vw для резины)

А так не проще ?

Ну, задайте каждому внутреннему блоку ширину 50% и разрешите перенос как ответил @AndrewRook
Именно с flex-direction: column у вас без фикс. высоты ничего не получится

Каких хаков-то? Не знаю хака с паддингами. Если вы про margin-left: auto; // left - пример , то это ожидаемое поведение. На мой взгляд, это не совсем хак и удобнейшая вещь в некоторых случаях.

Использую полгода-год на проде, без хаков, но с префиксами. Пока косяков не было.

Перенесите подключение своих стилей ниже подключения бутстрапа. Иначе он будет их перекрывать

Ну, можно сразу сделать flex-start и отступы руками указать