I'm building a WP Bootstrap theme that will add/end rows depending on the quantity of posts output.

The code is fine if I only use "col-md-4" as there will only ever be 3 in a row. However, I want this to use to 2 per row when the screen size is less, but this obviously means my conditional row code is completely in-affective as it still adds the row every 3rd post rather than every 2.

Has anyone tackled this problem before? Is there a better solution to this?

PHP Code:
<div class="row">

    <?php
    
        $i 
1;
        
        <?
php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        
            <div class="col-md-4 col-sm-6">
                    
                // POST CONTENT
            
            </div>

        <?php if ($i == ) echo "</div><div class='row'>" ;?>
                
    <?php $i++; endwhile; endif; ?>

</div>