I created a loop in my archive page displaying the posts in 3 columns (33% width) inside a row with 100% width. Each column is a post.

What I would like to achieve is to make the loop more flexible for smaller screens: 2 columns of 50% inside the row container for tablets then 1 column of 100% for mobiles. My main problem is, I need the posts inside the row container. So It would be: a row with 3 columns, then a row with 2 columns and a row with 1 column.

This is the code of the loop:

<!-- Start the Loop -->
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>

  <?php get_template_part( 'template-parts/content', 'archive' ); ?>

  <?php if( $wp_query->current_post % 3 == 2 ) : ?>

 </div>
 <!-- row -->

 <div class="row">
 <?php endif; ?>

<?php endwhile; ?>

Any help would be much appreciated, thanks!