Question

我刚刚发现Push / Pull with Bootstrap，我可以看到你可以重新订购不同屏幕尺寸的列，如下所示： -

<div class="col-md-4 col-sm-4 col-md-push-0 col-xs-push-4">1</div>
<div class="col-md-4 col-sm-4 col-md-pull-0 col-xs-pull-4">2</div>
<div class="col-md-4 col-sm-4">3</div>

哪个工作正常，在上面的示例中，2在较小的屏幕上显示为1。

如果我希望sm列为12，那该怎么办？这怎么工作呢？我试过了： -

<div class="col-md-4 col-sm-12 col-md-push-0 col-xs-12 col-xs-push-12">1</div>
<div class="col-md-4 col-sm-12 col-md-pull-0 col-xs-12 col-xs-pull-12">2</div>
<div class="col-md-4 col-sm-12 col-xs-12">3</div>

但是1和2现在在较小的屏幕尺寸上消失了吗？

所以基本上我想要实现： -

<div class="col-sm-12">2</div>
<div class="col-sm-12">1</div>
<div class="col-sm-12">3</div>

对于较小的设备，如果有意义的话？

这是JSFIDDLE - 提前谢谢！

Answer 1

你扭转了局面！您将基本代码编写为2,1,3，然后将其拉出来，直到它在大屏幕上看起来像您想要的方式。

这是整个移动第一个的事情。

<div class="row">
  <div class="col-md-4 col-sm-4 col-md-push-4">2</div> <!-- Push Column -->
  <div class="col-md-4 col-sm-4 col-md-pull-4">1</div> <!-- Pull Column -->
  <div class="col-md-4 col-sm-4">3</div>
</div>

Fiddle

这突破md，但你明白了

Bootstrap - 使用col-12推/拉？

1 个答案: