Reading this makes me really appreciate the tailwindcss approach to breakpoints.

I find it far easier to wrap my mind around this:

<div class="bg-gray-400 h-screen p-4">
  <div class="bg-white rounded-t text-center">
    <h1 class="text-xl font-medium">ishadeed.com</h1>
  </div>
  <div class="flex justify-between py-4 md:space-x-4 h-screen">
    <div class="hidden md:block bg-white rounded-lg p-4 flex-none">
      <h2 class="text-l font-medium">Left Column</h2>
    </div>
    <div class="bg-white md:rounded-lg flex-grow">
      <h1 class="text-2xl font-bold text-center font-serif">Main Content</h1>
    </div>
    <div class="hidden md:block bg-white rounded-lg h-screen flex-none p-4">
      <h2 class="text-l font-medium">Right Column</h2>
    </div>
  </div>
</div>

Which results in this on a wide screen and in this on a narrow screen.

Here’s my codepen page if anyone wants to compare complexity and see what’s easier for your own brain.

(To be clear… I’m not convinced one approach is better than the other. I have an easier time applying the tailwind one to the stuff I do, probably due to years of backend brain warp. It would make sense to me if it broke differently for someone with a different background.)