Показать сообщения в WordPress

Question

Мне нужно сначала отобразить мои первые два сообщения в двух столбцах, а остальные три в трех столбцах. Смотрите скриншот ниже:

Это то, что я имею до сих пор:

<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>

И вот что я получаю в итоге:

Как действовать отсюда?

Answer 1

Как объяснено в моем комментарии, я бы порекомендовал вам сделать разметку для всех 6 элементов одинаковой и на одном уровне, а затем по-разному стилизовать их с помощью css. Посмотрите на flexbox. Вы можете сделать первые 2 элемента шириной 50%, а остальные 33%. Используйте медиа-запросы, чтобы сделать их отзывчивыми. Вот небольшой пример кода:

.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>

Это должно быть хорошей отправной точкой для создания этого макета.