Css 更改行的基础/引导部分上的div顺序

我有一个设计，我有3个div

在桌面模式下-2个div位于同一行，在移动模式下，每个div都是一整行，但顺序需要更改

例如，这是我的HTML（使用基础CSS）：

第一
最后
中间的

当我在手机屏幕上时，需要做的是“LAST”div将排在最后，即使它是第一行的一部分

不复制HTML、使用JS或在某些设备上使用奇怪的float是否可能

这是我做的小提琴：

---

您可以将

mobile-first

和

mobile-middle

div包装到另一列中。然后将负数

边距右

应用于宽屏幕上的

移动中间

div

请检查结果：

1） 引导

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.集装箱{
保证金：0自动；
最大宽度：500px；
}
[类别|=“移动”]{
高度：100px；
}
.mobile first{背景色：蓝色；}
.mobile last{背景色：红色；}
.mobile middle{背景色：绿色；}
@介质（最小宽度：992px）{
.mobile middle{
保证金权利：-33.33333%！重要；
宽度：150%！重要；
}
}

第一
中间的
最后

根据轻便摩托车的建议。我可以对所有列使用相同的行div。 如果它们都在同一个div中，那么解决方案很简单，我可以使用display:flex

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

    .mobile-first{
       order: 1;
    }

    .mobile-last{
       order: 3;
    }

    .mobile-middle{
       order: 2;
    }

---

使用javascript，您可以在最后一行附加

mobile last

，这将从以前的位置删除它，但如果您想将其移回（以防您想使用纵向/横向），则需要记住它的以前位置。谢谢，但我不想寻找JS解决方案@mopedI know。。若你们知道每一列的确切高度，你们就可以使用负边距。顺便说一句，你可以把所有3列放在一行，它会工作得很好（如果它有帮助…）是的，它有帮助！我不知道我可以在一排中使用它。。。如果可以的话，这很简单，我可以使用flexbox。当然可以：）检查文档中的演示：

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

    .mobile-first{
       order: 1;
    }

    .mobile-last{
       order: 3;
    }

    .mobile-middle{
       order: 2;
    }