css - 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

    <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>

希望能帮助到你

Answer 2

<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 3

像这样设置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>

所以你现在有 2 列：

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