Construya un diseño de cuadrícula flexible de 3 columnas y 2 filas con el primer elemento que abarque ambas filas

Básicamente estoy tratando de codificar esto:

Estoy bastante seguro de que se puede construir con Flex, pero parece que no puedo hacerlo funcionar (y responder). En respuesta, sería bueno mover los 4 bloques de la derecha debajo del bloque principal izquierdo grande en tamaños de pantalla más pequeños.

Estoy construyendo esto en un bucle WP, pero bastante cómodo con esa parte, simplemente no puedo hacer que funcione la estructura HTML / CSS real.

Esto es lo que he intentado hasta ahora (¡y fallé!):

HTML / bucle

global $wp_query;
$wp_query = new WP_Query( $args );
if ( have_posts() ) : 
    echo '<div class="featured-posts-query">';
    while ( have_posts() ) : the_post(); ?>


            <div class="featured-posts">
                    <div class="featured-posts-image">
                        <?php the_post_thumbnail("thumbnail");?>
                    </div>
                    <div class="posts-category">
                    <?php $postType = get_post_type_object(get_post_type());
if ($postType) {
echo esc_html($postType->labels->singular_name);
} ?>
                    </div>

                    <div class="featured-posts-title">
                        <a href="<?php the_permalink(); ?>">
                            <h3> 
                                <?php echo mb_strimwidth(get_the_title(), 0, 40, '...'); ?>
                            </h3>
                        </a>
                    </div>
                </a>
            </div>


    <? endwhile; 
    echo '</div>';
    do_action( 'genesis_after_endwhile1' );
endif;
wp_reset_query();
}

CSS

.featured-posts-query {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 550px;
  width: 102%;
}

.featured-posts:nth-child(1) {
  flex: 0 0 100%;
  width: 53%;
}

.featured-posts:nth-child(n+2) {
  flex: 0 0 49%;
  width:20%;
}