如何重新排列列网格？

Question

我所拥有的是一个包含多个项目的双列布局:

.grid {
  column-count: 2;
}

.grid-item {
  break-inside: avoid;
  height: 50px;
  margin-bottom: 10px;
  background-color: green;
  text-align: center;
  line-height: 50px;
  color: white;
}

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

https://codepen.io/Deka87/pen/RgdLeZ

现在我需要能够仅使用CSS对列内的项重新排序(因此它们在不同的屏幕分辨率上的顺序不同),所以我认为我可以这样做:

.grid {
  display: flex;
  flex-direction: column;
  column-count: 2;
}
.grid-item:nth-child(1) {
  order: 5;
}

显然,这没有用,打破了2栏布局.有人试过解决这个问题吗？我有机会得到这个工作吗？

PS:同一行上的项目不应该具有相同的高度(在这种情况下我可以使用简单的浮点数).很抱歉没有在开头指定.

Answer 1

如果容器上没有固定的高度，一列弹性项目将不知道在哪里换行。没有什么会导致中断，因此项目将继续扩展单列。

另外，column-count和display: flex代表两种不同的 CSS 技术。column-count不是 Flex 容器中的有效属性。

CSS 网格布局可能对您有用：

调整屏幕宽度以触发媒体查询

修改后的代码笔

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-rows: 50px;
  grid-auto-flow: column;
  grid-gap: 10px;
}

.grid-item {
  background-color: green;
  text-align: center;
  line-height: 50px;
  color: white;
}

@media ( max-width: 500px) {
  .grid-item:nth-child(2) {
    order: 1;
    background-color: orange;
  }
}

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>