How to customize the display of posts in wordpress for different screen resolutions?

Question

WordPress

Good afternoon! On the main page in one of the headings it is set to display 3 posts. The output of posts for this category is carried out through a loop:

<div class="row">
    <?php query_posts('cat=2&orderby=date&order=DESC&posts_per_page=3');?>
    <?php if(have_posts()):while(have_posts()): the_post();?>
        <div class="col-md-4 col-sm-6">
            <div class="content_post">
                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                    <?php get_template_part( 'content', get_post_format() ); ?>

                </div>
            </div>
        </div>
    <?php endwhile; endif;?>
</div>
<?php wp_reset_postdata();?>

Bootstrap markup is used. Then you need to have 2 posts on tablets, and 3 posts again on mobile. Here's how it should be: . For these purposes, there is a class in the bootstrap ".hidden-sm". Can you please tell me how to apply the ".hidden-sm" class to the 3rd post?

Answer 1

<div class="row">
    <?php query_posts('cat=2&orderby=date&order=DESC&posts_per_page=3'); ?>

    <?php if(have_posts()): $i = 0; while(have_posts()): the_post(); ?>
        <div class="col-md-4 col-sm-6 <?php echo ($i % 3 == 0) ? 'hidden-sm' : ' '; ?>">
            <div class="content_post">
                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <?php get_template_part( 'content', get_post_format() ); ?>
                </div>
            </div>
        </div>
    <?php $i++; endwhile; endif; ?>
</div>

<?php wp_reset_postdata(); ?>

not tested, but should work. So I understand that you were looking for such an approach.