使用引导程序响应地移动列

Question

我有一段在引导步骤中从左到右读取。我想要做的是在移动视图中将右侧的部分显示在左侧的顶部。我试图使用推/拉方法，但他们似乎只是将我的内容推到页面上。

这里是我有什么

<div class="row process-page wow animated fadeInRightBig animation-delay-2"><!-- Create row col-6 --> 
      <div class="col-xs-push-12 col-md-6 col-sm-6"> 
       <h3 class="title margin-b-30">Title</h3> 
       <p>Content</p> 
      </div> <!-- end col-6 --> 
      <div class="col-xs-pull-12 col-md-6 col-sm-6 clipB" > 
       <h3 class="title margin-b-30 margin-l-30"></h3> 
      </div> 
     </div> <!-- end Row --> 

因此，它看起来在大/中正常，但是移动我似乎无法让他们交换位置（从上到下）

这里是我的意思

桌面：

[A][B] 

移动

[B] 
[A] 

我认为推/拉会做的伎俩，如果我推顶端的12和拉底部12，但它所做的，它推动他们都离开屏幕。

Answer 1

您正在使用push和pull以错误的方式使用，您需要将其用于sm视图。在HTML

• 先改变顺序，然后使用权推拉

  <div class="row"> 
      <div class="col-xs-12 col-sm-6 col-sm-push-6"> 
       <p>B</p> 
      </div> 
      <div class="col-xs-12 col-sm-6 col-sm-pull-6" > 
       <p>A</p> 
      </div> 
  </div> 
  

入住这Demo

Answer 2

只需按-12即可抵消该数量。改为使用左拉和右拉。