Řada, nebo sloupec

Na řadě jsou tři kroky v sekci Jak adoptovat. Seznam s nimi (prvek ol) je flex kontejner se třídami flex gap-6, takže kroky stojí vedle sebe v řadě. Na mobilu je každý krok vmáčknutý do úzkého sloupečku s jedním nebo dvěma slovy na řádku.

Na mobilu mají být kroky pod sebou a od tabletu výš vedle sebe. Třídu flex-col znáte z lekce Flexbox, Grid a pozice: je to flex-direction: column. Jejím opakem je flex-row, tedy flex-direction: row, což je výchozí směr flex kontejneru. Podle zásady mobile first jsou kroky nejdřív ve sloupci a od md: v řadě:

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

Dvojice flex-col md:flex-row patří v Tailwindu k nejčastějším. Použijete ji pro všechno, co má být na počítači vedle sebe a na mobilu pod sebou: obrázek vedle textu, menu vedle obsahu, pole vedle tlačítka.

Mezera nastavená třídou gap-6 platí v obou směrech: mezi kroky v řadě i ve sloupci.