Html 如何在Bootstrap 3中创建（双？）嵌套行并垂直对齐？

我使用的是Bootstrap3.3.4，我不知道如何在两列的每一侧嵌套一列。我可以得到左边和中间两个。col-sm-6，但最右边的柱不会垂直于顶部对齐

中间的列也是覆盖了文本的图像，我似乎不知道如何垂直对齐文本

vertical-align: middle;

没有工作，除非我忽略了一些很简单的东西，放在哪里呢

下面是简化的代码，但codepen链接将非常有助于说明问题

广告放在左边！
广告放在右边！

您应该更改html结构，然后更改它们的类。您必须用div（

.col-sm-6

）将

幻灯片（
.col-sm-6
）的所有父项包装起来，然后将
.col-sm-6
更改为
.col-sm-12
。但是，我解决了您的问题，对于垂直居中，我使用了
display:flex

@user122552它是否解决了您的问题？是否仍有垂直对齐顶部div的方法？同样，flex也可以工作，但它不像普通的引导网格那样崩溃。侧边广告仍然保留在侧边。@user122552你是说？
<section>

    <div class="container">
        <div class="row">



   <!-- tall left column ad -->
            <div class="col-sm-3 ads">
              <h1>Ad Placed on the Left!</h1>
            </div>


<div class="col-sm-6">
  <div class="row">

   <!-- img 1 -->
            <div class="col-sm-6"></div>

   <!-- img 2 -->
            <div class="col-sm-6"></div>

  </div>
</div>


<div class="col-sm-6">
  <div class="row">

   <!-- img 3 -->
            <div class="col-sm-6"></div>

   <!-- img 4 -->
            <div class="col-sm-6"></div>

  </div>
</div>

<div class="col-sm-6">
  <div class="row">

   <!-- img 5 -->
            <div class="col-sm-6"></div>

   <!-- img 6 -->
            <div class="col-sm-6"></div>

  </div>
</div>

   <!-- tall left column ad -->
            <div class="col-sm-3 ads">
              <h1>Ad Placed on the Right!</h1>
            </div>



       </div>
     </div>

</section>