Row or Column

Next are the three steps in the How to Adopt section. The list with them (the ol element) is a flex container with the classes flex gap-6, so the steps stand side by side in a row. On a phone, each step is squeezed into a narrow column with a word or two on each line.

On a phone, the steps should be one under another, and from a tablet up, side by side. You know the class flex-col from the lesson Flexbox, Grid and Position: it's flex-direction: column. Its opposite is flex-row, flex-direction: row, which a flex container has by default. Mobile first, the steps are a column first, and from md: up, a row:

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

The pair flex-col md:flex-row is one of the most common in Tailwind. You'll use it for anything that stands side by side on a computer and one under another on a phone: a picture next to a text, a menu next to the content, a field next to its button.

The gap set by gap-6 applies in both directions: between the steps in a row as well as in a column.