Question

我试图让这项工作超过一个小时但没有成功......

在我的桌面版本中，我有3列，如下所示：

A，C：col-lg-3 B：col-lg-6

[A][B][C]

我想让他们在移动设备上这样展示

A，C：col-sm-6 B：col-sm-12

[A][C]
[  B ]

我正在尝试左拉col-sm-pull-x和col-sm-push-x，但我的问题是列保持在相同的垂直位置，就像这样

    [A]
    [  B ]
  [C]          -> col-sm-pull-6

Answer 1

要实现这一点，我们会查看您希望div在移动设备上显示的顺序，因为这是移动的第一帧工作。你的最终结果告诉我们，标记应该是div＃a，然后是div＃c，然后是div＃b。从那里我们为xs，sm，md分配大小的所有类。现在我们将使用推拉来重新排序它们在md屏幕宽度和更大。

首先在xs和sm上创建

[A][C]
[ B  ]

现在我们已经

了

[A][C][ B  ]

我们需要将B拉回3列，然后在md和更大的位置将C推过6列。看下面的标记和小提琴

<div class="container">
    <div class="row">
        <div id="a" class="col-md-3 col-sm-6 col-xs-6">COL A</div>
        <div id="c" class="col-md-3 col-sm-6 col-xs-6 col-md-push-6">COL C</div>
        <div id="b" class="col-md-6 col-sm-12 cold-xs-12 col-md-pull-3">COL B</div>
    </div>
</div>

不需要ID。看到小提琴 - http://jsfiddle.net/52VtD/6933/

Bootstrap在移动视图上重新排列列

1 个答案: