html - Bootstrap 3 - 推送二次方 block

Question

我正在尝试构建模板，但我遇到了 push pull 的问题类。

移动:

    |------------------|
    |    1    |    2   |
    |------------------|
    |         3        |
    |------------------|

<div class="col-xs-6">1</div>
<div class="col-xs-6">2</div>
<div class="col-xs-12">3</div>

桌面 它应该看起来像

|-------|------------|
|   1   |            |
|-------|     3      |
|   2   |            |
|-------|------------|

所以我必须push 3在 lg通过 col-lg-8和 pull 2通过 col-lg-8 .但是 Box 2 消失了。

有人可以提示我做错了什么吗？

Answer 1

Bootstrap :http://www.bootply.com/sUbVdvut9U

HTML :总是 50%

<div class="container">
<div class="col-xs-12 col-sm-6">
  <div class="col-xs-6 col-sm-12">A</div>
  <div class="col-xs-6 col-sm-12">B</div>
  </div>
  <div class="col-xs-12 col-sm-6 text-center">C</div>
</div>

样式 4/8 当你谈论 lg-8 时，我认为你应该更喜欢这个

Bootstrap :http://www.bootply.com/numuikLwq0

<div class="container">
<div class="col-xs-12 col-sm-4">
  <div class="col-xs-6 col-sm-12">A</div>
  <div class="col-xs-6 col-sm-12">B</div>
  </div>
  <div class="col-xs-12 col-sm-8 text-center">C</div>
</div>