Question

如何订购xs size块？我有这段代码：

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-sm-8">
        MAIN
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4">
        SIDEBAR
    </div>
  </div>
</div>

我想要的是在将页面大小调整为xs大小时将SIDEBAR块放在首页。

谢谢！

Answer 1

尝试col-*-push-*和col-*-pull-*。 push将向左移动容器，pull将向右移动容器。

所以在你的例子中：

<div class="col-sm-4 col-sm-push-8 col-xs-12">
    SIDEBAR
</div>
<div class="col-sm-8 col-sm-pull-4 col-xs-12">
    MAIN
</div>

这应该可以解决问题。另请注意，我排除了lg和md类。 Bootstrap会自动使用最大的可用类来处理更大的屏幕。因此，如果您没有指定lg和md但指定sm，则会将sm用于中型和大型。

Here's a fiddle.

Answer 2

使用col-xs-12

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-8 col-xs-12">
        MAIN
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
        SIDEBAR
    </div>
  </div>
</div>

在xs大小的侧边栏后订购主要块

2 个答案: