html - Bootstrap 3 更改全 Angular 列顺序

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>