Php 在WordPress中显示帖子

我需要先在两列中显示我的前两篇文章，然后在三列中显示其他三篇文章。请参见下面的屏幕截图：

这就是我到目前为止所做的：

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

案例

这就是我的结局：

---

如何从这里开始？

就像我在评论中解释的那样，我建议您将所有6个元素的标记设置为相同的级别，然后使用css对它们进行不同的样式设置。看看flexbox。可以使前两个元素的宽度为50%，其他元素的宽度为33%。使用媒体查询使其具有响应性。 以下是一些基本示例代码：

.container{
显示器：flex；
柔性包装：包装；
保证金：0自动；
最大宽度：900px；
}
.项目{
框大小：边框框；
边框：4px实心#fff；
背景：ddd；
弹性：150%；
最小高度：200px；
}
.项目：第n个孩子（3），
.项目：第n个孩子（4），
.项目：第n个孩子（5）{
弹性：133%；
}

我建议您将所有6个元素的标记设置为相同的级别，然后使用css对它们进行不同的样式设置。看看flexbox。可以使前两个元素的宽度为50%，其他元素的宽度为33%。使用媒体查询使其响应。非常感谢您提供的提示，我们将尝试一下：）