My breakpoints in tailwind are doing the opposite of what they're supposed to

Question

Im using next.js and tailwind. My code is normally supposed to be display flex and at the md breakpoint I want it to switch to flex-col-reverse, but it does the opposite of that how can I fix this? (The line of code im talking about is the second line) ` How to win friends and influecne people in the digital age Dale Carnegie Time tested advice for the digital age

      <div className="w-full border-b border-[#e1e7ea]">
        <div className="flex flex-wrap justify-between w-[400px] py-4  ">
          <InnerBookRating icon={<AiOutlineStar />} text={"4.4 (608 ratings)"} />
          <InnerBookRating icon={<AiOutlineClockCircle />} text={"03:24"} />
          <InnerBookRating icon={<BiMicrophone />} text={"Audio & Text"} />
          <InnerBookRating icon={<HiOutlineLightBulb />} text={"8 Key Ideas"} />
        </div>
      </div>

      <div className="space-y-6 mt-6">
        <div className="flex space-x-4">
          <button className="flex justify-center items-center text-lg space-x-2 px-8 py-2 bg-[#032b41] text-[#fff] rounded-md text-[24px] hover:opacity-80 ">
            <i>
              <BsBook />
            </i>
            <span>Read</span>
          </button>

          <button className="flex justify-center items-center text-lg space-x-2 px-8 py-2 bg-[#032b41] text-[#fff] rounded-md text-[24px] hover:opacity-80 ">
            <i>
              <BiMicrophone />
            </i>
            <span>Listen</span>
          </button>
        </div>

        <div className="text-[#0365f2]  text-lg flex items-center space-x-2 cursor-pointer">
          <BsBookmark />
          <h1>Add Title to my Library</h1>
        </div>
      </div>

      <div className="mt-8">
        <div className="flex flex-col space-y-4 mb-5">
          <h1 className="text-lg font-bold">Whats it about?</h1>
          <div className="flex space-x-4">
            <div className="p-3 rounded-md from-neutral-800 bg-[#f1f6f4]">
              Communication Skills
            </div>
            <div className="p-3 rounded-md bg-[#f1f6f4]">
              Technology & the Future
            </div>
          </div>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Incidunt, consectetur adipisci quae sed et suscipit dicta,
            voluptatem hic officia itaque quasi facilis, consequatur quas
            labore aut distinctio fugiat molestiae porro ratione? Cumque
            iusto tempora eos hic, quis aut, ipsa voluptates voluptatum
            ipsam reiciendis eum molestias natus optio. Explicabo, excepturi
            nemo?
          </p>
        </div>
        <div className="flex flex-col space-y-4">
          <h1 className="text-lg font-bold">Whats it about?</h1>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
            unde deserunt fuga nesciunt ab magnam iure ipsam officia fugiat
            id reiciendis cum sapiente repudiandae hic repellat, magni quia
            ea, minima praesentium quo quae? Quibusdam, dolore? Quisquam
            delectus quam quas, eum dolorem odio omnis expedita nesciunt
            laudantium architecto. Unde, non ab?
          </p>
        </div>
      </div>
    </div>

    <div className="pl-6 flex justify-center">
      <figure className="w-[300px]">
        <img className="" src="/assets/book.png" />
      </figure>
    </div>
  </div>
</div>`

I also tried switching the code so that it's normally flex-col-reverse and then switched to display flex on the md breakpoint, but that doesnt seem to work aswell

Answer 1

I don't see where is the mention break point needs to be, but I will explain you.
To create your desired behavior you need to it that way -

flex md:flex-col-reverse

You can read more about it in tailwindCSS documentation - https://tailwindcss.com/docs/responsive-design