html - 如何为响应式窄显示定义 DIV 堆栈排序

Question

我有以下 CSS

<DIV class=“container”>
<DIV class=“container”>LEFT</DIV>
<DIV class=“container”>RIGHT</DIV>
</DIV>

在宽屏幕上，它打印到屏幕上如下:

LEFT   RIGHT

在狭窄的显示器上，它打印到屏幕如下:

LEFT
RIGHT

然而我想要的是在窄屏幕上，打印如下:

RIGHT
LEFT

我该怎么做？

Answer 1

实现此目的的最简单方法是组合 media query和 order property .

您需要设置 display: flex在父级上，然后设置 order: 2在与 order: 1 结合的第一个元素上在第二个元素上，全部在媒体查询中。

这可以在下面看到，显示Left / Right在片段中，但是 Right / Left在整页中查看时。

.container {
  display: flex;
}

.container > div {
  width: 50%;
}

@media screen and (max-width: 768px) {
  .container > div:nth-of-type(1) {
    order: 2;
  }
  
  .container > div:nth-of-type(2) {
    order: 1;
  }
}

<DIV class='container'>
  <DIV>LEFT</DIV>
  <DIV>RIGHT</DIV>
</DIV>

请注意，我已经删除了 container内部类<div>元素，因为这会混淆过程，并且还修复了无效的 “”引号。