html - 如何在移动版上交换第一个 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 是否可行。我正在使用 Bootstrap 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

如果你在行上使用flexbox，你可以使用order属性(property)为您做这件事。 (您可以使用媒体查询将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>