I’m trying to work with responsive and dynamic content. I have a variable that allow me to switch the order of my flex container. This is adding flex-row-reverse instead of flex-row. I noticed it didn’t work as expected so I tried to write it in a static way but it’s still not working.

Here is my original code :

<div class="container flex flex-col md:flex-row-reverse gap-32 justify-between items-center my-80">
    <div class="basis-1/2">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT886zGcOg7rfEglQ-E75tevWWI8boVfdzQC0H163AdYQ&s" alt="alt" class="rounded w-full" />
    </div>
    <div class="content basis-5/12">
        <p class="mb-16">
            Content
        </p>
    </div>
</div>

The md:flex-row-reverse isn’t working for me, and the result is just the flex-col.

This code is definitely working on a tailwind playground, but not on my website, I’m not able to debug and understand why.
When I’m checking the output css file, the class exists:

  .md:flex-row-reverse {
    flex-direction: row-reverse;
  }
...

I also tried directly :

<div class="container flex flex-row-reverse gap-32 justify-between items-center my-80">

It’s still not working, however flex-col-reverse is working :

<div class="container flex flex-col-reverse gap-32 justify-between items-center my-80">

the column-reverse in the md also doesn’t work:

<div class="container flex flex-col md:flex-col-reverse gap-32 justify-between items-center my-80">

I have honestly no idea how to debug this.