html - Bootstrap 3 : columns over columns

Question

有没有一种方法可以在 Bootstrap 网格内以垂直对齐方式 (align-items: center;) 在一列之上显示一列？

与嵌套列水平对齐但垂直对齐相同，如果有可能在不破坏 Bootstrap 功能的情况下使用覆盖元素的绝对位置，那就太好了。

example image

<div class="row row-margin-bottom-100px">
<div class="row">
  <div class="col-xs-8 col-sm-6">
    Level 2: .col-xs-8 .col-sm-6
  </div>
  <div class="col-xs-4 col-sm-6">
    Level 2: .col-xs-4 .col-sm-6
  </div>
</div>

<div class="col-lg-6 col-padding-zero wow bounceInUp" >
    <img alt="" src="images/img01.jpg" style="width: 100%">
</div>
<div class="col-lg-6 col-padding-zero wow bounceInRight" >
    <img alt="" src="images/img02.jpg" style="width: 100%">
</div>

Answer 1

除了使用绝对位置或通过 flex 没有找到其他方法

带有位置绝对元素的代码:

<div class="row row-margin-bottom-100px">
<div class="row" style="position: absolute; z-index: 5000; width: 100%; top: 50%;">
  <div class="col-xs-8 col-sm-6">
    Level 2: .col-xs-8 .col-sm-6
  </div>
  <div class="col-xs-4 col-sm-6">
    Level 2: .col-xs-4 .col-sm-6
  </div>
</div>

<div class="col-lg-6 col-padding-zero wow bounceInUp" >
    <img alt="" src="images/img01.jpg" style="width: 100%">
</div>
<div class="col-lg-6 col-padding-zero wow bounceInRight" >
    <img alt="" src="images/img02.jpg" style="width: 100%">
</div>