Всем привет. Есть вот такая часть макета
<div class="row exp">
<div class="col col-ex d-flex flex-column">
</div>
<div class="col col-cat">
</div>
</div>
На больших экранах это выглядит, как две колонки расположенные рядом по горизонтали. Пытаюсь сделать так, чтобы при использовании средних экранов первая колонка занимала уже всю ширину родителя, а вторая колонка перенеслась под первую и также заняла всю ширину. Подскажите пожалуйста, как можно это сделать?