How can I get mongoDB data in different bootstrap cards - mongodb

Question

I am creating a News Blog Website. I have multiple cards in my home page showing news blog.
The structure of card are as follows:-
<div class="container">
<div class="row">
<!-- Blog entries-->
<div class="col-lg-8">
<!-- Featured blog post-->
<div class="card mb-4">
<!-- This is the latest trending news so I created this card to be big -->
</div>
</div>
<div class="row">
<!-- Now here I want 2 blog news in 1 row -->
<div class="col-lg-6">
<!--- Blog post-->
<div class="card mb-4">
<!-- 1st news -->
</div>
<div class="card mb-4">
<!-- 2nd News -->
</div>
</div>
<div class="col-lg-6">
<!--- Blog post-->
<div class="card mb-4">
<!-- 1st news -->
</div>
<div class="card mb-4">
<!-- 2nd News -->
</div>
</div>
</div>
Pictorial structure of my website is as shown here
Pictorial representation of my website
I want to add the latest last data entered in my mongoDB to go inside the big card (featured post) and rest all to go in the smaller cards in reverse order(the last data entered in database to be showed first).
My blog data in DB is as shown below
const post = new Post({
date: req.body.postDate,
title: req.body.postTitle,
content: req.body.postBody,
videoLink: req.body.postLink,
imgLink: req.body.postImgLink
});
post.save(function(err) {
if (!err) {
res.redirect("/");
}
});
and the data is loaded in home page as shown below
<% posts.forEach(function(post) { %>
<div class="/card mb-4">
<img class="card-img-top" src="<%= post.imgLink %>" alt="..." />
<div class="card-body">
<div class="small text-muted">
<%= post.date %>
</div>
<h2 class="card-title h4">
<%= post.title %>
</h2>
<p class="card-text">
<%- (post.content.substring(0, 250) + "..."); %>
</p>
<a class="btn btn-primary" href="/posts/<%= post._id %>">Read more →</a>
</div>
</div>
<% }); %>
Please help me, as I am new and trying to learn Full Stack Development. Sorry for my English and if my question sounds silly to you.