网格中的自定义帖子布局

对于我的Wordpress网站，我将帖子放在3x网格中。这是生成输出的代码。

<div class="first-post">
           <?php if (have_posts()) : the_post(); ?> 
           <!-- calling first the_post(); will step the loop forward -->
           <?php get_template_part('content','grid-firstpost'); ?>  
           <?php endif; ?> 
        </div>

        <div class="other-posts">
            <?php $i = 1; ?>
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>                    
                <!-- the loop will be at the 2nd post here -->
                <?php get_template_part('content','grid'); ?>                                          
                <?php if ($i%3 == 0) : ?>
                    <div class="clearfix"></div>
                <?php endif; $i++; ?>
                <?php if ( $_SERVER["REQUEST_URI"] == '/' ): ?>
                <?php if ($i == 3): ?>
                <?php if (have_posts()) : the_post(); ?> 
                   <!-- calling the_post(); will step the loop forward -->
                   <?php get_template_part('content','grid-test'); ?>  
                   <?php if ($i%3 == 0) : ?>
                    <div class="clearfix"></div>
                <?php endif; $i++; ?>
                   <?php endif; ?> 
                <?php endif ?>
                <?php endif ?>
                <?php if ($i == 7): ?>
                    <div class="first-post">
                       <!-- making post 7 fullwidth -->
                       <?php get_template_part('content','grid-firstpost'); ?>
                    </div>
                <?php endif ?>

            <?php endwhile; wp_reset_query(); endif; ?>  
        </div>

我已经为网格中的第三个位置创建了一个自定义div。问题是，由于自定义div (<?php if ($i == 3): ?>)，原本应该有那个位置的帖子被隐藏了。

所以输出是这样的：

+全宽立柱+

第一篇文章 nbsp nbsp；第二个职位 自定义分区

第四篇文章 第五岗位 nbsp nbsp nbsp；第六站

应该是什么：

+全宽立柱+

首次发布 nbsp；第二个职位 自定义分区

第三职位 第四个职位 nbsp；后第五站

我不知道怎么解决这个问题。