How do I get a parent to STOP being flex above a certain media breakppoint

I have a parent element

<div class="flex flex-col p-1 overflow-hidden">
   <div class="text-slate-400 text-xs line-clamp-1">Reported by</div>
   <div class="text-sm whitespace-nowrap line-clamp-1">User Name</div>
</div>

I want the flex to work for small screens up ONLY to medium and then STOP being flex. I have tried on the parent element md:inline, md:inline-flex, md:block and none of those do it.

I have tried on the child elements md:flex-nowrap md:inline md:block All using a variety of combinations. Nothing seems to disable the 'flex' of the parent container once I get bigger than 768px (md width) and I'm just guessing at this point.

Thanks!

Solution

This takes from the practice of Mobile-First responsiveness, essentially this means that you should design your UI with a mobile device in mind first, usually starting with a phone->tablet->laptop->desktop->larger screens don't really matter. Take a look at the modified code, specifically at the start. md:block basically means that upon reaching the medium breakpoint the display property for that element will be block instead of flex.

<div class="md:block flex flex-col p-1 overflow-hidden">
   <div class="text-slate-400 text-xs line-clamp-1">Reported by</div>
   <div class="text-sm whitespace-nowrap line-clamp-1">User Name</div>
</div>

Secondary, if you've already tried md:block and it isn't working it is because you aren't "Rebuilding" tailwindcss everytime you've made a change, use this command in the node.js terminal or whichever you prefer
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
this rebuilds your project every single time you save the file. Make sure to change the input and output file paths according to your own.