用引导程序负责移动列

Question

我有一个在bootstrap中从左到右读取的部分。 我想要做的是让正确的部分显示在移动视图中左侧的那个上面。 我尝试使用推/拉方法，但它们似乎只是将我的内容推离页面。

这就是我所拥有的

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

检查这个演示

Answer 2

只需按-12就意味着抵消该数量。 请使用左拉和右拉。