Html 如何在移动版上交换第一个div和最后一个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是否可行。我使用的是bootstrap3

移动电话的预期结果

<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>

---

使用Flex属性交换元素。这里有一篇关于它的文章

无法演示仅移动部分，因此请使用以下CSS

@media only screen and (min-width : 480px) {
    .row { display: flex; flex-direction: column-reverse; }
}

$（'button'）。在（'click'，function（）上{
$（'.row'）.toggleClass（'row-reverse'）；
})

.row reverse{display:flex；flex direction:column reverse；}

第一
第二
第三
第四
反转/取消反转

如果在

行

上使用

flexbox

，则可以使用该属性来执行此操作。（您可以使用媒体查询向目标移动设备添加

display:flex

）

请参见下面的演示中如何交换

第四行

和

第一行

的位置：

div.row{
显示器：flex；
弯曲方向：立柱；
}
[id$='-行']{
顺序：2；
}
#第一排{
顺序：3；
}
#第四排{
顺序：1；
}

1.
2.
3.
4.

如果您只想更改不同屏幕大小的外观，可以使用默认引导网格排序：

可能更容易在此处看到响应结果：

4.
2.
3.
1.

您可以使用

jQuery

var updateDivOrder=function（）{
如果（$（文档）.width（）<500）{
var first=$（“#第一行”）.clone（）；
var last=$（“#第四行”）.clone（）；
$（'.row div'）.first（）.remove（）；
$（'.row div'）.last（）.remove（）；
$（'.row div'）.first（）.before（last）；
$（'.row div'）.last（）之后（第一个）；
}否则{
var first=$（“#第一行”）.clone（）；
var last=$（“#第四行”）.clone（）；
$（'.row div'）.first（）.remove（）；
$（'.row div'）.last（）.remove（）；
$（'.row div'）.first（）.before（first）；
$（'.row div'）.last（）在（last）之后；
}
}
updateDivOrder（）；
$（窗口）。调整大小（UpdateVorder）

1.
2.
3.
4.
对于纯CSS方式，您可以使用两个div和引导类。。。和.visible sm、.visible xs。包含的div可以使用这些。FrasBox方法可能要好得多，你考虑使用BooTras-4吗？您可以快速尝试交换库：。。代码和引导示例-4：从mediaquerie和
顺序轻松交换
@媒体屏幕和（最大宽度：600px）{.row>：类型{order:1；}.row>的第一个：{order:-1；}的最后一个
。我只做了一个评论，因为你说使用bootstrap 3；），但是如果你wish@kukkuzOP说
如何在移动设备上交换第一行div和第四行div？
让我在回答中更改一下，谢谢！