Tailwind CSS + React - Configuring a tricky responsive layout

Issue

I want to configure a layout in react using Tailwind that changes on bigger screen. However I am unable to configure the layouts such that they get adjusted both on mobile as well as bigger screen.

The Layout:-

For mobile:

A B

C D

For Bigger Screen:

A

B D

C

How do I create it? Is it even possible to create such a layout?

What am I doing currently (can copy in https://play.tailwindcss.com/ to check):-

<div class="flex flex-row md:flex-col">
  <div class="flex flex-col">
    <div class="bg-blue-500">Content A</div>
    <div class="bg-red-500">Content C</div>
  </div>
  <div class="flex flex-col md:flex-row">
    <div class="bg-green-500">Content B</div>

    <div class="bg-yellow-500">Content D</div>
  </div>
</div>

Solution

I think we cannot implement above layout using only flex-row and flex-col. We should use hidden to implement your layout.

<div class="flex flex-row md:flex-col">
  <div class="flex flex-col">
    <div class="bg-blue-500">Content A</div>
    <div class="bg-red-500 block md:hidden">Content C</div>
  </div>
  <div class="flex flex-col md:flex-row">
    <div class="bg-green-500">Content B</div>
    <div class="bg-yellow-500">Content D</div>
  </div>
  <div class="flex hidden md:block">
    <div class="bg-red-500">Content C</div>
  </div>
</div>

Answered By - Green Dev