在移动屏幕上交换2 div的订单

Question

我有2格。

在高清屏幕上，我有：

<div>1</div>
<div>2</div>

但是我需要在移动设备中使用媒体查询-

<div>2</div>
 <div>1</div>

我只是想更改移动屏幕中div的顺序。 小提琴会很有帮助

有人可以帮我完成这项工作吗？高度赞赏。预先感谢。

Answer 1

如果您使用flexbox布局，则可以在媒体查询中使用order CSS属性。但这需要您将两个div包装到具有display: flex的容器中。阅读链接的指南，了解有关Flexbox的更多信息。

Answer 2

您必须使用父元素作为伸缩，并尝试从移动设备开始：

  

display：flex

  @media(min-width: 768px){
    .parent{display:flex;}
    .parent .a{order: 2}
    .parent .b{order: 1}
  }

<div class="parent">
  <div class="a">2</div>
  <div class="b">1</div>
</div>

这是对问题的答案，但不要就此止步。尝试用单独的文件等学习和修复我的示例。 使用“ flex-wrap：wrap;”确保容器堆叠