Так же как это делается и c bootstrap. У вас есть набор классов, который при определенной ширине экрана меняет свое значение.
Берем обычный пример:
<div class="row">
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-4 col-xs-4"></div>
</div>
Так мы создали строку из трех блоков в ней. В bootstrap 3 у вас блокам задается свойство float:left;
В случае с flex, вам надо задавать .row свойства:
.row {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: row;
justify-content: space-between;
}
У колонок вы убираете
float:left
Далее при адаптации вы .row присваиваете одно свойство:
flex-direction:column; если вам надо чтобы внутренние элементы располагались в колонку (столбик). Для внутренних блоков так же пишете что-нибудь типа col-xs-12, чтобы они занимали 100% ширину родителя на телефоне. Ничего сложного.
