tailwind css flex-col-reverse not working - reactjs

Question

I am currently working on a component's responsive styling wherein on large screens I have the div with the text element sitting on top of the div containing the img element and on smaller and medium screens have the div with the image aligned right below the div with the text element. I am using Next.js and and Tailwind CSS for styling.
The styling works fine on large screens but for some reason the div with the text element is not showing in small screens when I already have flex flex-col-reverse in the parent element
Here is how the entire code look like:
import React from 'react'
import Image from 'next/image'
import catImage from '../assets/catImage.webp'
const LargeCard = () => {
return (
<article className='relative flex flex-col-reverse h-screen py-16 lg:h-96' >
<div>
<Image src={catImage}
layout='fill'
objectFit='cover'
className='rounded-2xl'
/>
</div>
<div className='h-96 lg:absolute lg:top-32 lg:left-12' >
<h2 className='text-white text-4xl font-semibold mb-3 w-64' >Cat Ipsum</h2>
<p className='text-lg lg:w-[300px] text-white' >Stretch out on bed i heard this rumor where the humans are our owners, pfft, what do they know?!</p>
<button className='bg-gray-100 text-gray-900 px-4 py-2 rounded-lg mt-5 max-w-md ' >Learn more</button>
</div>
</article>
)
}
export default LargeCard
tailwind.config.js:
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
maxWidth: {
md: '90vw'
}
},
variants: {
extend: {},
},
plugins: [
require('tailwind-scrollbar-hide')
],
}

Answer 1

forgot to post the answer. I actually solved the following day.
First. flex-col-reverse is actually working.
Second. setting nextjs's <Image> component's objectFit property to cover will set the img element to cover the entire area of it's grandparent element so to contain it you add position relative to the parent div containing it and make sure to define it's height too.
something like this:
<div className='relative h-96'>
<Image src={catImage}
layout='fill'
objectFit='cover'
className='rounded-2xl'
/>
</div>