使用推拉更改列的顺序 Bootstrap

Question

我刚刚在 Bootstrap 中发现了 "push" 和 "pull" 类，但是在按照我喜欢的方式实现它们时遇到了很多麻烦。在XS屏幕上，我的内容显示如下，是正确的：

|A||B||C|

但在 SM 屏幕上，我需要它是：

|B|
|C|
|A|

我的 HTML 在下面。我尝试将 "col-sm-push-10" 添加到包含我的按钮的 div，但这只是将它推到它自己的 div 中的右侧。我实际上需要将此 div 向下移动。任何帮助将不胜感激！！

<div class="container-fluid">
    <div class="col-sm-4">
       <ul class="prod-group">
         <div class="col-xs-2 col-sm-10">
            <li><button type="button" class="btn">A</button></li>
          </div>
          <div class="col-xs-6 col-sm-10">
            <li>B</li>
           </div>
           <div class="col-xs-4 col-sm-10">
              <li>Cr</li>
           </div>
        </ul>    
     </div>

Answer 1

您应该按照您希望在 -sm- 上看到的顺序编写您的元素。然后调整他们的位置在-xs-:

<div class="row">
    <div class="col-sm-12 col-xs-4 col-xs-push-4">
        B
    </div>

    <div class="col-sm-12 col-xs-4 col-xs-push-4">
        C
    </div>

    <div class="col-sm-12 col-xs-4 col-xs-pull-8">
        A
    </div>     
</div>

顺便说一句，你应该使用 li 作为 ul[ 的直接子代=23=] 以及不直接在 中使用其他元素，例如 div ul，因为无效。

Answer 2

通常您希望元素在 xs 屏幕上垂直堆叠，而在较大 (sm) 屏幕上保持水平，所以这是一种不寻常的情况，您实际上想要相反的情况。首先创建堆叠 sm 布局，然后使用推拉调整 xs.. A-B-C 大。手机上的 B-C-A。

<div class="container-fluid">
    <div class="row">
    <div class="col-sm-4">
        <ul class="row prod-group">
            <li class="col-xs-6 col-sm-10 col-xs-push-2 col-sm-push-0">
                B
            </li>
            <li class="col-xs-2 col-sm-10 col-xs-pull-0 col-sm-pull-0">
                C
            </li>
            <li class="col-xs-4 col-sm-10 col-xs-pull-8 col-sm-pull-0">
                A
            </li>
        </ul>
    </div>
    </div>
</div>

演示 http://www.codeply.com/go/yMxh8sGwMZ

此外，不要忘记将您的列放在 row 中以进行适当的填充。

使用推拉更改列的顺序 Bootstrap

Change order of cols with push and pull Bootstrap

css

twitter-bootstrap

responsive-design

grid

col