在col-4和col-8之间交替的div中包装博客文章 _twitter-bootstrap

我正在建立一个博客页面布局, 在该布局中, 我需要交替显示col-4和col-8列, 而不是手动进入每个列并获取所需的帖子。
我尝试在col-4内添加循环, 但无法弄清楚如何在col-4和col-8之间交替

< ?php global $wpdb; $args = array( 'post_type' => 'post', 'orderby' => 'date', 'order' => 'DESC', 'nopaging' => true, ); $this_query = new WP_Query( $args ); ?> < section class="ftco-section ftco-project" id="projects-section"> < div class="container-fluid"> < div class="row justify-content-center pb-5"> < div class="col-md-12 heading-section text-center ftco-animate"> < h1 class="big big-2"> Projects< /h1> < h2 class="mb-4"> Our Projects< /h2> < /div> < /div> < div class="row"> < ?php if ( $this_query-> have_posts() ) : ?> < ?php while ( $this_query-> have_posts() ) : $this_query-> the_post(); ?> < div class="col-md-4"> < div class="project img ftco-animate d-flex justify-content-center align-items-center" style="background-image: url('< ?php echo get_the_post_thumbnail_url(get_the_ID()); ?> '); "> < div class="overlay"> < /div> < div class="text text-center p-4"> < h3> < a href="http://www.srcmini.com/< ?php the_permalink(); ?>"> < ?php the_title(); ?> < /a> < /h3> < span> Web Design< /span> < /div> < /div> < /div> < div class="col-md-8"> < div class="project img ftco-animate d-flex justify-content-center align-items-center" style="background-image: url('< ?php echo get_the_post_thumbnail_url(get_the_ID()); ?> '); ?> /images/project-5.jpg); "> < div class="overlay"> < /div> < div class="text text-center p-4"> < h3> < a href="http://www.srcmini.com/< ?php the_permalink(); ?>"> < ?php the_title(); ?> < /a> < /h3> < span> Web Design< /span> < /div> < /div> < /div> < ?php endwhile; wp_reset_postdata(); else : ?> < p> < ?php esc_html_e( 'Sorry, no posts found.' ); ?> < /p> < ?php endif; ?> < /div> < /div> < /section>

【在col-4和col-8之间交替的div中包装博客文章】我希望col-4和col-8自动地和交替地填充。我已经尝试过这样做, 但是博客文章不会在col-4和col-8之间交替显示, 而只是填充col-4 div中的所有博客文章。
#1试试这个代码。

< ?php $class = "col-md-4"; // 2nd element class ?> < ?php while ( $this_query-> have_posts() ) : $this_query-> the_post(); ?> < ?php if($class == "col-md-4") { $class = "col-md-8"; } else if ($class == "col-md-8") { $class = "col-md-4"; }?> < div class="< ?php echo $class; ?> "> < div class="project img ftco-animate d-flex justify-content-center align-items-center" style="background-image: url('< ?php echo get_the_post_thumbnail_url(get_the_ID()); ?> '); "> < div class="overlay"> < /div> < div class="text text-center p-4"> < h3> < a href="http://www.srcmini.com/< ?php the_permalink(); ?>"> < ?php the_title(); ?> < /a> < /h3> < span> Web Design< /span> < /div> < /div> < /div> < ?php endwhile;

$x=0; if ( $this_query-> have_posts() ) : while ( $this_query-> have_posts() ) : $this_query-> the_post(); $class_array = array('col-4', 'col-8'); $col_class = $class_array[$x%2]; $x++; < div class="< ?php echo $col_class ?> "> < /div> endwhile; wp_reset_postdata(); endif;