Question

我们的一位设计师创建了一个布局，其中页脚内容顺序从桌面更改为移动。我正在使用bootstrap，并希望尽可能简单地做到这一点。我相信以下是正确的标记，但它似乎不适用于全宽列？

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-sm-push-12">
            <div class="row">
                <div class="col-md-12">
                    <p>Ooo content</p>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-sm-pull-12">
            <div class="row">
                <div class="col-md-12">
                    <p>Ooo more content</p>
                </div>
            </div>
        </div>
    </div>
</div>

示例：https://jsfiddle.net/rwydcepc/

上述目的是在应用sm时将顶部列与底部列切换。这似乎没有发生，一切都搞砸了？

是否有其他方法可以使用bootstrap或一些简单的额外css来完成此操作，理想情况下我想避免重复内容并显示/隐藏或依赖Javascript。

这里有一个类似的问题，但它没有回答这个问题：Change the order of col-*-12 columns in Bootstrap 3 by using push/pull

Answer 1

已经有使用Bootstrap reordering的解决方案，但不是100％宽度列，下面的解决方案使用Flexbox方法。

@media (max-width: 768px) {
  .reorder .row {
    display: flex;
    display: -ms-flex;
    flex-direction: column;
  }
  .reorder .row .item1 {
    order: 2;
  }
  .reorder .row .item2 {
    order: 1;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container reorder">
  <div class="row">
    <div class="col-sm-12 item1">

      <p>Ooo content</p>

    </div>
    <div class="col-sm-12 item2">

      <p>Ooo more content</p>

    </div>
  </div>
</div>

Bootstrap 3更改全宽列顺序

1 个答案: