My implementation in next.js and tailwind is supposed to use display flex by default and switch to flex-col-reverse at the md breakpoint. However, it seems to be doing the opposite. How can I resolve this issue? (The line of code in question is the second line) How to build genuine digital relationships and influence people By Dale Carnegie Timeless guidance for success in the digital era
<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've also attempted to reverse the code so that it defaults to flex-col-reverse and switches to display flex on the md breakpoint, but that doesn't seem to be effective either.