Bootstrap堆叠列

Question

我有一个愚蠢的引导问题。

代码：

<div class="row">
  <div class="col-sm-4" style="background-color:pink;"> lorem... </div>
  <div class="col-sm-8" style="background-color:yellow;"> lorem... </div>
  <div class="col-sm-4" style="background-color:pink;"> lorem... </div>
</div>

我想把最后的粉红色div放到它上面的空间里。 什么是实现目标的最简单方法？

Answer 1

<div class="row">
  <div class="col-sm4">
      <div class="row">
          <div class="col-sm-12" style="background-color:pink;"> lorem... </div>
          <div class="col-sm-12" style="background-color:pink;"> lorem... </div>
      </div>
  </div>
  <div class="col-sm-8" style="background-color:yellow;"> lorem... </div>
</div>

Answer 2

设置2列如下：

<div class="row">
  <div class="col-sm-4">
      <div class="col-sm-12" style="background-color:pink;"> lorem... </div>
      <div class="col-sm-12" style="background-color:pink;"> lorem... </div>
  </div>

  <div class="col-sm-8">
       <div class="col-sm-12" style="background-color:yellow;"> lorem... </div>
  </div>
</div>

所以你现在有两列：

• 4个cols中的一个，另外8个cols
• 每个孩子都有12个cols来获取父母的最大宽度（4或8个cols）

Answer 3

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
  <div class="col-sm-4" style="background-color:pink;">
    <div class="row">lorem... top</div>
    <div class="row">lorem... bottom</div>
  </div>
  <div class="col-sm-8" style="background-color:yellow;"> lorem... Yellow</div>

</div>

希望有所帮助