Как перестроить колонки в столбик на телефоне

Короткий ответ

Сделайте флекс-колонку по умолчанию и разверните её в строку на широком экране:

<style>
  .row { display: flex; flex-direction: column; gap: 12px; }
  .row div { flex: 1; padding: 12px; background: lavender; }
  @media (min-width: 500px) { .row { flex-direction: row; } }
</style>
 
<div class="row"><div>Photo</div><div>Description</div><div>Price</div></div>

Без медиазапросов

С flex-wrap колонки сами переносятся, когда каждой не хватает минимальной ширины, заданной в flex-basis:

<style>
  .wrap { display: flex; flex-wrap: wrap; gap: 12px; }
  .wrap div { flex: 1 1 180px; padding: 12px; background: honeydew; }
</style>
 
<div class="wrap"><div>Photo</div><div>Description</div></div>

flex: 1 1 180px значит «начни со 180px, расти и сжимайся». Когда два блока по 180px не помещаются, второй уходит на новую строку и растягивается на всю ширину.

Поменять порядок

Если на телефоне картинка должна идти после текста, используйте flex-direction: column-reverse или order. Помните, что клавиатура и экранные дикторы идут по порядку в HTML, поэтому сильно перемешивать нельзя.

Частая ошибка

width: 33% у колонок мешает им встать в столбик: даже в колонке они остаются шириной в треть. Ширину колонок во flexbox задают через flex, а не width.