如何在移动版本上将第一个 div 与最后一个 div 交换？

Question

我有如下 div。

<div class="row">
  <div class="col-sm-12" id="first-row"></div>
  <div class="col-sm-12" id="second-row"></div>
  <div class="col-sm-12" id="third-row"></div>
  <div class="col-sm-12" id="fourth-row"></div>
</div>

如何在移动设备上将第一行 div 与第四行 div 交换？是否可以仅使用 css？实现这一目标的最佳策略是什么，我可以使用 javascript 来实现，但想知道仅使用 css 是否可行。我正在使用引导程序 3

手机上的预期结果

<div class="row">
    <div class="col-sm-12" id="fourth-row"></div>
    <div class="col-sm-12" id="second-row"></div>
    <div class="col-sm-12" id="third-row"></div>
    <div class="col-sm-12" id="first-row"></div>
</div>

Answer 1

如果您使用flexboxon row，则可以使用该order属性为您执行此操作。（您可以使用媒体查询添加display: flex到目标移动设备）

在下面的演示中查看fourth-row和的位置如何first-row交换：

div.row {
  display: flex;
  flex-direction: column;
}

[id$='-row'] {
  order: 2;
}
#first-row {
  order: 3;
}
#fourth-row {
  order: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-sm-12" id="first-row">1</div>
  <div class="col-sm-12" id="second-row">2</div>
  <div class="col-sm-12" id="third-row">3</div>
  <div class="col-sm-12" id="fourth-row">4</div>
</div>