Сделать элементы (сообщения) по индивидуальному заказу в сетке

Question

В моей теме WordPress у меня есть сетка, которая показывает избранные сообщения. Это мне очень нравится, но порядок сообщений в нем не такой, как мне нравится:

https://i.imgur.com/GzGwRXl.jpg

На фото по ссылке выше вы можете видеть в красных прямоугольниках текущий порядок постов в нем, под ними зеленые прямоугольники для иллюстрации того, как бы я хотел их отображать. Самая большая сетка будет для последней опубликованной публикации. Есть одна идея сделать это с сеткой CSS, но я не знаю, как это сделать,

код для отображения этого в теме здесь (при необходимости я мог бы отправить весь файл с кодами):

 $post_count = 0;

    foreach ( $posts as $post ) {
        if ($post_count == 0) {
            $buffy .= '<span class="td-big-grid-flex-column">';
        }

        if ($post_count < 2) {
            $td_module_flex = new td_module_flex_6($post, $this->get_all_atts());
            $buffy .= $td_module_flex->render($post_count);

            $post_count++;
            continue;
        }

        if ( $post_count == 2 ) {
            $buffy .= '</span>';
            $buffy .= '<div class="td-big-grid-flex-scroll-holder">';

            $td_module_flex = new td_module_flex_7($post, $this->get_all_atts());
            $buffy .= $td_module_flex->render($post_count);

            $post_count++;
            continue;
        }

        if ( $post_count > 2 ) {
            $td_module_flex = new td_module_flex_6($post, $this->get_all_atts());
            $buffy .= $td_module_flex->render($post_count);

            $post_count++;
            continue;
        }

        $post_count++;
    }