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

Just push-12意味着抵消该数额。请改用左拉和右拉。

用引导程序负责移动列

2 个答案: