如何重新排列列网格？

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 网格布局可能对你有用：

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

revised codepen

.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>

Answer 2

我倾向于为此使用 flexbox

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.grid-item {
  box-sizing: border-box;
  width: calc( 50% - 5px );
  min-height: 50px;
  margin-bottom: 10px;
  background-color: green;
  text-align: center;
  line-height: 50px;
  color: white;
}

.grid-item:nth-child(1) {
  order: 5;
}

<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>  

flex 语法得到广泛支持且超级灵活。