css - bootstrap 3.0 列在移动 View 中推到底部

Question

假设我有这个 HTML

<div class="row">
    <div class="col-md-4 col-xs-12" id="col1"></div>
    <div class="col-md-8 col-xs-12" id="col2"></div>
</div>

在移动 View 中，如何将 col1 移动到底部，在 col2 之后。我知道如果我在 DOM 中将 col1 移到 col2 之后很容易，但我想将 col1 留在左侧，而 col2 在右侧。

Answer 1

Bootstrap 3 是移动优先的，按照你想在移动 View 中显示的列的代码顺序使用 col-xx-push-y 和 col-xx-pull-y 类以在桌面 View 中重新排列列。

<div class="row">
  <div class="col-md-4 col-md-push-8 col-xs-12">Right column, but first in mobile view</div>
  <div class="col-md-8 col-md-pull-4 col-xs-12">Left column, displayed in left although it is declared in code after right column</div>
</div>

在此处查看演示 - http://www.bootply.com/rZ5Uv8q84K