我使用的是next.js和tailwind。我的代码通常应该是display flex，在md断点处，我希望它切换到flex-col-reverse，但它却做了相反的事情。我该如何解决这个问题？（我说的代码行是第二行）“如何在数字时代赢得朋友并影响他人”

<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>`

字符串
我还尝试切换代码，使其通常为flex-col-reverse，然后切换到在md断点上显示flex，但这似乎也不起作用