Switch flexbox containers on desktop and mobile with tailwind

Question

I want to change the display and order of three components on screen resize. I've tried a few things with flexbox, but I'm not sure it's possible.

Essentially I want the components on mobile to appear like below. Image and title side by side with a description underneath:

and on desktop like below. Image on one side, with title and description together stacked:

Could anyone have a go at doing this using Tailwind?

Answer 1

You can achieve this with grid like so, the key player being row-span-2:

<div class="grid w-full max-w-xl grid-cols-2">
  <div class="flex h-full w-full items-center sm:row-span-2">
    <div class="flex aspect-square w-full items-center justify-center bg-red-400">
      image
    </div>
  </div>
  <div class="flex aspect-square items-center justify-center bg-blue-400">
    title
  </div>
  <div class="flex aspect-square items-center justify-center bg-green-400">
    description
  </div>
</div>

You can check out the working example here.