使用Bootstrap推拉类的布局

Question

当我尝试使用简单的Bootstrap push和pull类来重新排序列时，我遇到了一个奇怪的问题。

在我的情况下，我想为移动设备做这个（我知道，首先是移动设备，这就是HTML的编写方式）：

| 1 |

| 2 |

| 3 |

| 4 |

对于桌面（md＆amp; lg），我想要这个布局：

然而，就我实现目标而言，这是：

我知道其他与此问题非常相似的问题，但在我的案例中没有一个问题有用。与我的案例最相关的是这个问题，但尚未得到回答：Bootstrap-colums over rows

编辑：

根据@choz的回答，这是我到目前为止尝试过的代码：

<div class="row">

  <div class="col-md-8 carousel-header">
    <div class="example-div double">
      1
    </div>
  </div>

  <div class="col-md-12">
    <div class="example-div">
      2
    </div>
  </div>

  <div class="col-md-4 no-padding col-md-push-8">

      <div class="col-md-12">
        <div class="example-div">
          3
        </div>
      </div>


      <div class="col-md-12">
        <div class="example-div">
          4
        </div>
      </div>

  </div>
</div>

@choz，您的回答不起作用，因为布局必须按照移动问题中指定的编号顺序进行。

Answer 1

尝试使用中型和大型屏幕。然后它应该在较小的屏幕中叠加：

<div id="notSmartphone">
<div class="row">
  <div class="col-md-8 carousel-header">
    <div class="example-div double">
       1
    </div>
  </div>

  <div class="col-md-4">
     <div class="col-md-12 row">
       <div class="example-div">
         3
       </div>
     </div>

     <div class="col-md-12 row">
       <div class="example-div">
          4
       </div>
     </div>
  </div>
</div>

<div class="col-md-12 row">
     <div class="example-div">
        2
     </div>
</div>
</div>

对于智能手机视图，您可以使用display:none;这样的大屏幕：

<div id="smartphone">
<div class="col-md-12 row">
   <div class="example-div">
      1
   </div>
</div>

<div class="col-md-12 row">
   <div class="example-div">
      2
   </div>
</div>

<div class="col-md-12 row">
   <div class="example-div">
      3
   </div>
</div>

<div class="col-md-12 row">
   <div class="example-div">
      4
   </div>
</div>
</div>

使用媒体查询，例如：

@media screen and (min-width: 320px) and (max-width: 640px) {
    #smartphone {display:block;}
    #notSmartphone {display:none;}
}

@media screen and (min-width: 641px) {
    #smartphone {display:none;}
    #notSmartphone {display:block;}
}

Answer 2

尝试此代码。我希望这会对你有所帮助。

<div class="row">

  <div class="col-sm-8 carousel-header">
    <div class="example-div double">
      1
    </div>
  </div>
   <div class="col-sm-4 no-padding hidden-xs">

      <div class="col-md-12">
        <div class="example-div">
          3
        </div>
      </div>


      <div class="col-md-12">
        <div class="example-div">
          4
        </div>
      </div>

  </div>
  <div class="col-md-12">
    <div class="example-div">
      2
    </div>
  </div>

  <div class="col-md-4 col-xs-12 no-padding visible-xs">

      <div class="col-md-12">
        <div class="example-div">
          3
        </div>
      </div>


      <div class="col-md-12">
        <div class="example-div">
          4
        </div>
      </div>

  </div>
</div>

Answer 3

您可以从我的示例中查看。

希望你从中学到一些东西

HTML

<div class="row" style="
    text-align: center;
">
    <div class="col-lg-12">
    <div class="col-lg-6" style="
    background-color: rgba(0, 0, 255, 0.4);
    /* height: 29%; */
    padding-bottom: 3%;
">
        1
    </div>
    <div class="col-lg-6" style="
    padding: 0;
    margin: 0;
">
        <div class="col-lg-12" style="
    background-color: orange;
">
            3
        </div>
        <div class="col-lg-12" style="
    background-color: pink;
    margin: 0;
    padding-bottom: 16px;
">
            4
        </div>
    </div>
         <div class="col-lg-12" style="
    background-color: yellow;
">
             2
        </div>
    </div>
</div>

结果

DEMO