Строка или столбец

Дальше — три шага в разделе «Как взять кошку». Список с ними (элемент ol) — это flex-контейнер с классами flex gap-6, поэтому шаги стоят рядом, в строку. На телефоне каждый шаг сжат в узкий столбик, по слову-два в строке.

На телефоне шаги должны идти друг под другом, а начиная с планшета — рядом. Класс flex-col вы знаете по уроку «Flexbox, Grid и позиционирование»: это flex-direction: column. Противоположный ему класс — flex-row, то есть flex-direction: row, который у flex-контейнера действует по умолчанию. По принципу mobile first шаги сначала идут столбцом, а начиная с md: — строкой:

<ol class="flex flex-col md:flex-row">

Пара flex-col md:flex-row — одна из самых частых в Tailwind. Она пригодится везде, где на компьютере всё стоит рядом, а на телефоне — друг под другом: картинка рядом с текстом, меню рядом с содержимым, поле рядом со своей кнопкой.

Промежуток, заданный классом gap-6, действует в обоих направлениях: и между шагами в строке, и в столбце.