title: Build a 3 column, 2 row flex grid layout with first item spanning both rows
body: <p>Basically I'm trying to code this:</p>
  
  <p><a href="https://i.stack.imgur.com/6usqz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6usqz.png" alt="Grid Layout"></a></p>
  
  <p>I'm pretty sure it can be built with Flex but I just can't seem to get it working (and be responsive).  Responsively it would be nice to move the 4 blocks on the right under the main large left block at smaller screen sizes.</p>
  
  <p>I'm building this out in a WP loop, but pretty comfortable with that part of it, just can't get the actual HTML/CSS Structure to work. </p>
  
  <p>Here's what I've tried so far (And failed!):</p>
  
  <p>HTML/Loop</p>
  
  <pre><code>global $wp_query;
  $wp_query = new WP_Query( $args );
  if ( have_posts() ) : 
      echo '&lt;div class="featured-posts-query"&gt;';
      while ( have_posts() ) : the_post(); ?&gt;
  
  
              &lt;div class="featured-posts"&gt;
                      &lt;div class="featured-posts-image"&gt;
                          &lt;?php the_post_thumbnail("thumbnail");?&gt;
                      &lt;/div&gt;
                      &lt;div class="posts-category"&gt;
                      &lt;?php $postType = get_post_type_object(get_post_type());
  if ($postType) {
  echo esc_html($postType-&gt;labels-&gt;singular_name);
  } ?&gt;
                      &lt;/div&gt;
  
                      &lt;div class="featured-posts-title"&gt;
                          &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;
                              &lt;h3&gt; 
                                  &lt;?php echo mb_strimwidth(get_the_title(), 0, 40, '...'); ?&gt;
                              &lt;/h3&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
  
      &lt;? endwhile; 
      echo '&lt;/div&gt;';
      do_action( 'genesis_after_endwhile1' );
  endif;
  wp_reset_query();
  }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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%;
  }
  </code></pre>