响应断点后将 Bootstrap 第 3 列移至行首

Question

我在 Bootstrap 中有一个 3 列的行，如下所示：

在某个断点处，它垂直翻转并从上到下排序，ABC 列表按预期显示在最后。我想知道 Bootstrap 是否有一个功能（如数据属性）将第三列的 ABC 列表移动到行的垂直顶部..可能是索引或 [=21 实现的东西=].如果不是，这就是有问题的 HTML 代码段 - 使用 CSS 可以获得相同的结果吗？

<div class="row">
  <div class="panel panel-default col-md-4">
    <div class="panel-heading">
      <h3 class="panel-title">Weekly News</h3>
    </div>
    <div class="panel-body">
      Panel body
    </div>
  </div>
  <div class="panel panel-default col-md-4">
    <div class="panel-heading">
      <h3 class="panel-title">Daily Events</h3>
    </div>
    <div class="panel-body">
      Panel body
    </div>
  </div>
  <div class="list-group col-md-4">
    <a href="#" class="list-group-item">A</a>
    <a href="#" class="list-group-item">B</a>
    <a href="#" class="list-group-item">C</a>
  </div>
</div>

Answer 1

您可以使用 .col-md-push-* 和 .col-md-pull-* 重新排序您的列。

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">
            <div class="list-group">
                <a href="#" class="list-group-item">A</a>
                <a href="#" class="list-group-item">B</a>
                <a href="#" class="list-group-item">C</a>
            </div>
        </div>
        <div class="col-md-4 col-md-pull-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Weekly News</h3>
                </div>
                <div class="panel-body">
                    Panel body
                </div>
            </div>
        </div>
        <div class="col-md-4 col-md-pull-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Daily Events</h3>
                </div>
                <div class="panel-body">
                    Panel body
                </div>
            </div>
        </div>
    </div>
</div>

JSFiddle

Bootstrap link: Column ordering

响应断点后将 Bootstrap 第 3 列移至行首

Move Bootstrap 3rd column to top of row after responding to breakpoint

html

css

twitter-bootstrap