I am currently developing a blog website and I need assistance with arranging the cards in this specific order: https://i.sstatic.net/Ffpcb.png
Despite my efforts using Bootstrap, I am unable to achieve the desired layout. Here is the code I have so far:
<div class="row">
<div class="col-md-4"> <Card>
<img className="card-img-top" src='{activity.image[0].url}' alt=""/>
{/* <Link to={`/product/${product.name}`}> */}
<Card.Body>
{/* <Link to={`/product/${activity.id}`}> */}
<Card.Title>Title</Card.Title>
{/* </Link> */}
<Card.Text>$Price</Card.Text>
<Button className='btn-gallery'>See Blog</Button>
</Card.Body>
</Card>
</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Is there anyone who can guide me on how to structure the cards just like shown in the provided screenshot?