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!