如何在下面的固定div堆栈下面创建div？

Question

我使用bootstrap并且我有三行，第二行最初是隐藏的，并且在滚动到导航栏之前显示一行。

然而，当第二行出现时，隐藏第二行后面的第三行位于第二行下面。我怎样才能使第三行显示在第二行下面而不是下面？因此，当第二行出现时，页面看起来像bootstrap中的两个常规行。我想这样做，以便第三行和页面的其余部分可以在第二行下面滚动。滚动只是第三行总是出现在下面而不是第二行下面。

<div id="thumbnails1" class="row">
        <div class="col-xs-6 col-sm-6 col-lg-3 col-md-4">
            <div class="thumbnail">
                <img src="http://placehold.it/320x150" alt="">
                <div class="caption">
                    <p>See more snippets like this online item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
                </div>

            </div>
        </div>
      </div>

<div id="body-1" class="row">
            <div class="col-xs-6 col-sm-6 col-lg-3 col-md-4">
                <div class="thumbnail">
                    <img src="http://placehold.it/320x150" alt="">
                    <div class="caption">
                        <p>See more snippets like this online item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
                    </div>

                </div>
            </div>
          </div>

CSS：

.stuck {
  position: fixed;
  top: 0px;
  display: block;
  z-index: 11;
}

#thumbnails1 {
  display: none;
  background-color: black;
  clear: both;
}

javascript for scroll：

var mainbottom2 = $('#nav-bar-1').offset().top + $('#nav-bar-1').height();


                // on scroll,
                $(window).on('scroll',function(){      
                    stop = Math.round($(window).scrollTop());
                    stop += mainbottom2;
                    if (stop > mainbottom) {
                        $('#thumbnails1').addClass("stuck");
                        $('#thumbnails1').show();
                    } else {
                        $('#thumbnails1').removeClass("stuck");
                        $('#thumbnails1').hide();
                    }