Display posts in WordPress - php

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') ?>
Bekijk de case
</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.