ailwind CSS follows a mobile‑first approach. This means that the unprefixed classes (like flex-row) apply to all screen sizes by default, and breakpoint‑prefixed classes (like md:flex-col) only take effect when the viewport is at least the specified minimum width (768px for md). In your code, flex-row is always active on screens smaller than 768px, and only when the viewport is 768px or larger does md:flex-col override it.

If your intention is to have a column layout on smaller screens and switch to a row layout on larger ones, reverse the order of your classes like so:

This way, by default (on mobile) you get flex-col and then md:flex-row kicks in on larger screens.

Also, ensure your Tailwind configuration hasn’t been modified from the default breakpoints if you expect the standard behavior.