How to make two grid responsive layout in tailwind css

Question

I am trying to make a two-column responsive layout with tailwind CSS where the first column will take up to 70% and both columns will become full width on mobile. I have tried the below but it seems I am actually missing out on something and the results are not what I want. Please I need someone to help.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" /> <div class="grid grid-cols-5 md:grid-cols-1 lg:grid-cols-2 gap-3"> <div class="col-span-4 flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">2</div> <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">4</div> </div>

Answer 1

You can use grid-flow-row sm:grid-flow-col class for parent div and set sm for col-span-4 class, see the example below.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" /> <div class="grid grid-flow-row sm:grid-flow-col gap-3"> <div class="sm:col-span-4 flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">2</div> <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">4</div> </div>