Wordpress custom posts create new row when parent children is <=3

I have a custom post type in wordpress that adds new agents to a row. How can I create a conditional statement that checks the amount of posts in the row and if greater than 4 posts create a new div and append the new posts to a new row?

<?php get_header(); ?>

<div class="agent-wrap">
<?php
    $args = array(
        'post_type' => 'agents',
        'post_status' => 'publish',
        'posts_per_page' => '12'
    );
    $agents_loop = new WP_Query( $args );
    if ( $agents_loop->have_posts() ) : ?>
        <div class="agent-row">
        <?php
            while ( $agents_loop->have_posts() ) : $agents_loop->the_post();
                // variables
                $name = get_field( 'agent_name' );
                $position = get_field( 'agent_position' );
                $phone = get_field( 'agent_phone' );
                $email = get_field( 'agent_email' );
                $image = get_field( 'agent_image' );
                $link = get_the_permalink();
                ?>
                <a href="<?php echo $link; ?>">
                <div class="agent">
                    <div class="agent-bg"></div>
                    <div class="agent-content">
                        <h3><?php echo $name; ?></h3>
                        <h5><?php echo $position; ?></h5>
                        <hr class="divider" />
                        <a href="tel:<?php echo $phone; ?>"><?php echo $phone; ?> <i class="fa fa-phone"></i></a>
                        <a href="mailto:<?php echo $email; ?>"><?php echo $email; ?> <i class="fa fa-envelope"></i></a>
                    </div>
                    <img src="<?php echo $image; ?>">
                </div>
                </a>
            <?php
        endwhile;
        wp_reset_postdata();
    endif;
 ?>
    </div>
</div>

<?php get_footer(); ?>

Desired HTML structure

<div class="agent-row">
    <!-- only 4 agents post types per row -->
    <div class="agent"></div>
    <div class="agent"></div>
    <div class="agent"></div>
    <div class="agent"></div>
</div>
    <!-- New Row After first row reaches 4 agent posts -->
<div class="agent-row">
</div>

wp_query has a property called "current_post" which is the index of the post currently being displayed. You could use it inside the "while" loop to construct your layout.

"current_post" starts from zero, meaning if you need the first 4 posts, it'd be the posts with index 0, index 1, index 2 and index 3. Thus you can use if ($agents_loop->current_post <= 3) {} for the first layout and if ($agents_loop->current_post > 3) {} for the second layout:

if ($agents_loop->have_posts()) : ?>
    <div class='agent-row'>
        <?php
        while ($agents_loop->have_posts()) : $agents_loop->the_post();
            if ($agents_loop->current_post <= 3) {
                $name     = get_field('agent_name');
                $position = get_field('agent_position');
                $phone    = get_field('agent_phone');
                $email    = get_field('agent_email');
                $image    = get_field('agent_image');
                $link     = get_the_permalink();
        ?>
                <a href='<?php echo $link; ?>'>
                    <div class='agent'>
                        <div class='agent-bg'></div>
                        <div class='agent-content'>
                            <h3><?php echo $name; ?></h3>
                            <h5><?php echo $position; ?></h5>
                            <hr class='divider' />
                            <a href='tel:<?php echo $phone; ?>'><?php echo $phone; ?> <i class='fa fa-phone'></i></a>
                            <a href='mailto:<?php echo $email; ?>'><?php echo $email; ?> <i class='fa fa-envelope'></i></a>
                        </div>
                        <img src='<?php echo $image; ?>'>
                    </div>
                </a>
        <?php
            }
        endwhile;
        ?>
    </div>
    <!-- New Row After first row reaches 4 agent posts -->
    <div class='agent-row'>
        <?php
        while ($agents_loop->have_posts()) : $agents_loop->the_post();
            if ($agents_loop->current_post > 3) {
                # Put your desired layout here
            }
        endwhile;
        ?>
    </div>
    <?php
    wp_reset_postdata();
endif;

To avoid layout duplication, you can create a template file and include or require it in the loops.

To avoid duplication for the agent layout

Simply create a php file and called it agent-info.php in your theme.

agent-info.php

<a href='<?php echo $link; ?>'>
        <div class='agent'>
            <div class='agent-bg'></div>
            <div class='agent-content'>
                <h3><?php echo $name; ?></h3>
                <h5><?php echo $position; ?></h5>
                <hr class='divider' />
                <a href='tel:<?php echo $phone; ?>'><?php echo $phone; ?> <i class='fa fa-phone'></i></a>
                <a href='mailto:<?php echo $email; ?>'><?php echo $email; ?> <i class='fa fa-envelope'></i></a>
            </div>
            <img src='<?php echo $image; ?>'>
        </div>
</a>

And use include or require functions to use the template in your loops.