If you’re using bootstrap 4… you can just make your grid of 4 as col-6 (I used md) since it will run to the next row automatically without ruining the layout. If you are using bootstrap 3 you have to use a counter to increment the rows.

<div class="row">
    <!-- Real Data -->
    <?php 
        $lastPagePosts = new WP_Query(
            array('posts_per_page' => 1
        ));
        while ($lastPagePosts->have_posts()) {
            $lastPagePosts->the_post(); ?>
        <div class="col-sm-12 col-lg-6 big-box">
            <h2><?php the_title(); ?></h2>
            <p><?php echo wp_trim_words( get_the_content() , 12 ) ?></p>
        </div>
    <?php } ?>
    <div class="col">
        <div class="row">
            <?php
                $topPagePosts = new WP_Query(
                    array('posts_per_page' => 4, 'offset' => 1
                ));
                while ($topPagePosts->have_posts()) {
                    $topPagePosts->the_post(); ?>
                <div class="col-md-6">
                    <h2><?php echo wp_trim_words( get_the_title() , 6) ?></h2>
                    <p><?php echo wp_trim_words( get_the_content() , 9 ) ?></p>
                </div>
            <?php } ?>
        </div>
    </div>

    <!-- Dummy Data -->

    <div class="col-sm-12 col-lg-6 big-box">
        <h2>Latest News</h2>
        <p>The big bog will display the most resent post.</p>
    </div>

    <div class="col">
        <div class="row">
            <div class="col mini-box">
                <h2>Second</h2>
                <p>The big bog will display the Second most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Third</h2>
                <p>The big bog will display the Third most resent post.</p>
            </div>
        </div>
        <div class="row">
            <div class="col mini-box">
                <h2>Fourth</h2>
                <p>The big bog will display the Fourth most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Fifth</h2>
                <p>The big bog will display the Fifth most resent post.</p>
            </div>
        </div>
    </div>
</div>

I would like to request some help in adding the 5 latest posts inside a Bootstrap 4 Grid layout.
I just don’t seem to get the code right.

Can someone please help me

I have posted and image and code on what I’m trying to do.

View image to get an idea of what I need help with

<?php
get_template_part('content-wrapper'); ?>
<div class="row">
    <!-- Real Data -->
    <?php 
        $lastPagePosts = new WP_Query(
            array('posts_per_page' => 1
        ));
        while ($lastPagePosts->have_posts()) {
            $lastPagePosts->the_post(); ?>
        <div class="col-sm-12 col-lg-6 big-box">
            <h2><?php the_title(); ?></h2>
            <p><?php echo wp_trim_words( get_the_content() , 12 ) ?></p>
        </div>
    <?php } ?>
    <div class="col">
        <div class="row">
            <?php
                $topPagePosts = new WP_Query(
                    array('posts_per_page' => 4, 'offset' => 1 <!-- Updated this line -->
                ));
                while ($topPagePosts->have_posts()) {
                    $topPagePosts->the_post(); ?>
                <div class="col mini-box">
                    <h2><?php echo wp_trim_words( get_the_title() , 6) ?></h2>
                    <p><?php echo wp_trim_words( get_the_content() , 9 ) ?></p>
                </div>
            <?php } ?>
        </div>
    </div>

    <!-- Dummy Data -->

    <div class="col-sm-12 col-lg-6 big-box">
        <h2>Latest News</h2>
        <p>The big bog will display the most resent post.</p>
    </div>

    <div class="col">
        <div class="row">
            <div class="col mini-box">
                <h2>Second</h2>
                <p>The big bog will display the Second most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Third</h2>
                <p>The big bog will display the Third most resent post.</p>
            </div>
        </div>
        <div class="row">
            <div class="col mini-box">
                <h2>Fourth</h2>
                <p>The big bog will display the Fourth most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Fifth</h2>
                <p>The big bog will display the Fifth most resent post.</p>
            </div>
        </div>
    </div>
</div>
<?php

.mini-box {
    margin: 2px;
    font-size: 1.5em;
}