In my current project, Next JS is the framework I am working with. I am faced with the challenge of creating a card layout that adapts based on device size - for smaller devices, I want a plain card with the image on top and text below, similar to Bootstrap examples. However, for larger devices, I need the card layout to be in rows, with the image aligned on the left and the text on the right. Here is the code snippet I have been working with:
<div className="container pt-3">
<div className="card">
<div className="row row-cols-2">
<div className="col-sm-6 my-auto d-flex">
<Image
src="/main.webp"
className='card-img img-fluid rounded p-2'
width={400}
height={400}
alt="eco"
/>
</div>
<div className="col-sm-6 my-auto d-block">
<div className="card-body-right my-auto d-block p-2">
<h1 className="card-title">Content</h1>
<h4 className="card-text">2000</h4>
<ul>
<li><h5>Content</h5></li>
<li><h5>Content</h5></li>
<li><h5>Content</h5></li>
<li><h5>Content</h5></li>
<li><h5>Content</h5></li>
</ul>
<p><a href="#" className='text-decoration-none'>Más características</a></p>
<a href="#" className="btn btn-primary px-5">Ver</a>
</div>
</div>
</div>
</div>
</div>
Attempts were made to block certain classes, however none of them resulted in the desired outcome.