响应式 CSS：在到达媒体查询断点后将中间 div 行移动到单独的列

Question

我正在使用 CSS 媒体查询来创建响应式布局。

在我当前的 HTML 布局中，我使用 flexbox 来对齐 div 行：

<div id="page">
  <div id="div-1">DIV 1</div>
  <div id="div-2">DIV 2</div>
  <div id="div-3">DIV 3</div>
  <div id="div-4">DIV 4</div>
</div>

和CSS：

#page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

[id^="div-"] {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  width: 50vw;
}

#div-1 {
  height: 50px;
}

#div-2 {
  height: 70px;
}

#div-3 {
  height: 150px;
}

#div-4 {
  height: 100px;
}

这里有Jsfiddle供您修改。

这就是我想要的较小视口，但我想在下一个媒体查询断点上进行切换，让 2 个中间 div 转移到右侧的单独列，例如这个：

我该如何实现？对我来说很明显如何将最后几 div 行移动到另一列，但不确定如何处理中间行...

有没有办法通过使用 flexbox 或 grid 来实现？

Answer 1

另一种可能的解决方案是结合使用 order-属性和 Flexbox（缺点：您需要一点点额外的 html 并设置#page 容器的高度；优点：灵活 div 高度和间隙尺寸）：

#page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

[id^="div-"] {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  width: 50vw;
}

#div-1 {
  height: 50px;
  background: lightgreen;
}

#div-2 {
  height: 70px;
  background: lightyellow;
}

#div-3 {
  height: 150px;
  background: lightcoral;
}

#div-4 {
  height: 100px;
  background: lightblue;
}

@media (max-width: 1000px) {
  #page {
    flex-wrap: wrap;
    height: 300px;
  }
  #small-screen-spacer {
    order: 3;
    align-self: stretch;
    flex: 1 0 100%;
    margin-right: 10px;
  }
  #div-1 {
    order: 1;
  }
  #div-2 {
    order: 4;
  }
  #div-3 {
    order: 5;
  }
  #div-4 {
    order: 2;
  }
}

<div id="page">
  <div id="div-1">DIV 1</div>
  <div id="div-2">DIV 2</div>
  <div id="div-3">DIV 3</div>
  <div id="div-4">DIV 4</div>
  <div id="small-screen-spacer"> </div>
</div>

#small-screen-spacer 将填充整个可用垂直 space，以便移动 spacer（由顺序属性定义）之后的所有元素到第二列。此外，您可以通过将 spacer 上的 margin-right 设置为您想要的值来设置两列之间的所需间隙。

Fiddle

响应式 CSS：在到达媒体查询断点后将中间 div 行移动到单独的列

Responsive CSS: shift middle div rows to a separate column after reaching media query break point

html

css

grid

flexbox

css-grid