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，因此，项目，项目，边框。这就是我想要的方式（边界永远在最后）。

在移动设备上，我将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>

列反向排序

1 个答案:

jsFiddle demo