https://codepen.io/topicstarter/pen/KEMqZj - примерно так, манипулировать при медиа запросах можно как угодно ...и делать что угодно ... в общем смотрите и если что то не ясно пишите спрашивайте - постараюсь развёрнуто ответить
Ну смотрите: вы написали display:flex и потомкам width:50% но не учли что img вы не описали т.е надо написать для него display:block и width:100% для обоих потомков во flex контейнере и находе мы получим вот это : https://codepen.io/topicstarter/pen/YdLrxm
1) float использовать для обтекания
2) flexbox для позиционирования
а теперь вопрос к вам : почему так сложно написать 2019 но с таким кол-вом знаков пишете 2к19 ?
float ни кто не запрещает применять - просто применяют его исключительно для обтекания элементов
раньше для вертикального выравнивания применялись всякие "танцы с бубном" с флексом же это всё стало гораздо проще ...
пользоваться обтеканием внутри флекса можно
если забыть про адаптивность то нормально