How to correctly add in a row to bootstrap to fix grid system moving onto multiple lines

I am using bootstrap to display the posts on my front page. I have my posts alternate between 2 rows of 3 posts and 1 large post. Everything looked good except for the fact that I noticed that if there is a longer title or excerpt in one of the posts then the rest of the page would be messed up (example below). After researching I've noticed the best solutions are to use row and clear fix. However every time I try adding a div of row I seem to be placing it in incorrectly. (I had some help constructing my front-page.php so I don't know the correct way to add it in) Can anyone help me correctly add in a div row into my front-page.php? I would appreciate it a lot, I've been trying to find a solution for weeks!

I have tried looking at different solutions to questions on here but I still can't correctly change my own code. So if anyone can help at all it would be greatly appreciated.

how it should look...

how it looks when I have a post that has a title (or excerpt) that goes on to multiple lines...

as you can see example post 12 moves all the way over to the right (where it should be on the left) example post 13 and 14 are moved underneath.

my front-page.php

<?php
    /*
     * Template Name:
     */

    get_header();
    get_template_part ('inc/carousel');

    $the_query = new WP_Query( [
        'posts_per_page' => 14,
        'paged' => get_query_var('paged', 1)
    ] );

    if ( $the_query->have_posts() ) { 
?>
<div id="ajax">
    <?php
        $i = 0;
        while ( $the_query->have_posts() ) { 
            $the_query->the_post();

            if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... 
    ?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
    <div class="large-front-container">
        <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
    </div>
    <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
    <div class="front-page-post-info">
        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
        <?php get_template_part( 'front-shop-the-post' ); ?>
        <?php get_template_part( 'share-buttons' ); ?>
        <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
    </div>
</article>
<?php

} else { // Small posts 
?>
<article <?php post_class( 'col-md-4' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
     <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
     <?php get_template_part( 'front-shop-the-post' ); ?>
     <?php get_template_part( 'share-buttons' ); ?>
     <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
     }
         $i++;
     }
?>
</div>
<?php 
    if(get_query_var('paged') < $the_query->max_num_pages) {
       load_more_button();
    }
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();

You can create another variable $j = 0 and add row every 3rd small blog post.

<?php
/* 
 * Template Name: 
 */

get_header();
get_template_part('inc/carousel');

$the_query = new WP_Query( [
    'posts_per_page' => 14,
    'paged' => get_query_var('paged', 1)
] );


if ($the_query->have_posts()) {
?> 
<div id="ajax"> 
<?php
    $i = 0;
    $j = 0;
    while ($the_query->have_posts()) {
        $the_query->the_post();

        if ($i % 7 === 0) { // Large post: on the first iteration and every 7th post after... 
?> 
<div class="row"> 
<article <?php
            post_class('col-sm-12 col-md-12');
?>> 
<div class="large-front-container"> 
<?php
            the_post_thumbnail('full', array(
                'class' => 'large-front-thumbnail'
            ));
?> 
</div> 
<h2><a class="front-page-post-title" href="<?php
            the_permalink();
?>"><?php
            the_title();
?></a></h2> 
<p class="front-page-post-excerpt"><?php
            echo get_the_excerpt();
?></p> 
<div class="front-page-post-info"> 
<a class="moretext" href="<?php
            the_permalink();
?>">Read more</a> 
<?php
            get_template_part('front-shop-the-post');
?> 
<?php
            get_template_part('share-buttons');
?> 
<div class="front-comments"><?php
            comments_popup_link('0', '1', '%', 'comment-count', 'none');
?></div> 
</div> 
</article> 
</div> 

<?php

        } else { // Small posts 
?> 
<?php
            if ($j % 3 === 0)
                echo '<div class="row">';
?> 
<article <?php
            post_class('col-md-4');
?>> 
<?php
            the_post_thumbnail('full', array(
                'class' => 'medium-front-thumbnail'
            ));
?> 
<h2><a class="front-page-post-title" href="<?php
            the_permalink();
?>"><?php
            the_title();
?></a></h2> 
<p class="front-page-post-excerpt"><?php
            echo get_the_excerpt();
?></p> 
<div class="front-page-post-info"> 
<a class="moretext" href="<?php
            the_permalink();
?>">Read more</a> 
<?php
            get_template_part('front-shop-the-post');
?> 
<?php
            get_template_part('share-buttons');
?> 
<div class="front-comments"><?php
            comments_popup_link('0', '1', '%', 'comment-count', 'none');
?></div> 
</div> 
</article> 

<?php
            $j++;
            if ($j % 3 === 0)
                echo '</div>';
?> 
<?php
        }
        $i++;
    }
?> 

</div> 
<?php
    if (get_query_var('paged') < $the_query->max_num_pages) {
        load_more_button();
    }
} elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();