Display posts in WordPress

Question

I need to display my first two posts initially in two columns and the other three in three columns. See screenshot below:

This is what I have so far:

<section class="cases">
    <div class="container">
        <h4 class="title">Cases</h4>

        <?php

            $args = array(
                'post_type' => 'cases',
                'posts_per_page' => 5,
            );

            $the_query = new WP_Query( $args );

            if ( $the_query -> have_posts() ):

        ?>

        <div class="row">

            <?php
                while ( $the_query->have_posts() ): $the_query->the_post();
                $slug = get_post_field( 'post_name', get_post() );
            ?>

            <div class="col-sm-6">
                <?php the_title(); ?>
                <?php the_field('case_content') ?>
                <a href="#case-<?= $slug ?>" class="button">Bekijk de case</a>
            </div>

            <?php endwhile; wp_reset_postdata();?>

        </div>

        <?php endif;?>

    </div>
</section>

And this is what I end up with:

How to proceed from here?

Answer 1

Like explained in my comment I would recommend you to make the markup for all 6 elements the same and on the same level and then style them differently with css. Have a look at flexbox. You can make the first 2 elements 50% width and the others 33%. Use media queries to make them responsive. Here is some basic example code:

 .container { display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 900px; } .item { box-sizing: border-box; border: 4px solid #fff; background: #ddd; flex: 1 1 50%; min-height: 200px; } .item:nth-child(3), .item:nth-child(4), .item:nth-child(5) { flex: 1 1 33%; } 

 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 

This should be a good starting point to make this layout.