html - 列反向灵活排序

Question

我有以下标记:

.colReverse {
  display: flex;
  /* flex-direction: column-reverse; */
  flex-direction: column;
}

.border:after{
  content: "";
  display: block;
  width: 80%;
  background-color: black;
  height: 1px;
  margin: 60px auto 0px;
  order: 3;
}

<div class="colReverse border">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

在桌面上，flex-direction 是column，所以 item、item、border。这就是我想要的(边框总是最后)。

在移动设备上，我将 flex-direction 更改为 column-reverse，这显然会将边框置于元素之上。

因为我总是希望边框位于底部，所以我指定它的 order 为第 3 个(或最后一个)。但是，这不起作用？为什么？

Answer 1

从 column 切换到 column-reverse 不会自动发生。你需要一个触发器。最简单的解决方案是媒体查询。

因此，只需向媒体查询添加第二条规则，使您的边框在较小的屏幕上保持原样。

.colReverse {
  display: flex;
  flex-direction: column;
}

.border::after {
  content: "";
  width: 80%;
  background-color: black;
  height: 1px;
  margin: 60px auto 0px;
}

@media ( max-width: 500px ) {
  .colReverse {
    flex-direction: column-reverse;
  }
  .border::after {
    order: -1;
  }
}

<div class="colReverse border">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

jsFiddle demo