响应式 div 列，其中列项目在屏幕调整大小时移动

Question

我有三列名为 <div class="pageColumnOneThird">。

在每一列中，我使用 PHP 获取图像和帖子，其中最新的项目放在 top left column 中，下一个放在 top middle column 中，第三个放在 top right column，然后再回到 left column。

现在我试图让它响应，这样当显示两列时，每个 image/post 的位置都会改变。

示例： 当只有两列并排时，我需要第一行的项目是元素 1 和 2。然后第二行必须是元素3 和 4.

有什么方法可以使用 CSS 来做到这一点吗？

如果没有，是否有任何快速 jQuery 代码可以为我做这件事？

代码

<!-- FIRST COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 1</div>
    <div class="itemWrap">Element 4</div>
    <div class="itemWrap">Element 7</div>
</div>
<!-- SECOND COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 2</div>
    <div class="itemWrap">Element 5</div>
    <div class="itemWrap">Element 8</div>
</div>
<!-- THIRD COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 3</div>
    <div class="itemWrap">Element 6</div>
    <div class="itemWrap">Element 9</div>
</div>

这里还有一个jsfiddle。

Answer 1

你可以简单地使用一个包装器，然后只使用@media 查询

.pageColumnOneThird {
  font-size: 0;
}
.itemWrap {
  background-color: #AEAEAE;
  margin: 2px 0;
  width: 33.3%;
  padding: 0 1px;
  height: auto;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: 16px
}
@media (max-width: 768px) {
  .itemWrap {
    width: 50%
  }
}
@media (max-width: 480px) {
  .itemWrap {
    width: 100%
  }
}

<div class="pageColumnOneThird">
  <div class="itemWrap">Element 1</div>
  <div class="itemWrap">Element 2</div>
  <div class="itemWrap">Element 3</div>
  <div class="itemWrap">Element 4</div>
  <div class="itemWrap">Element 5</div>
  <div class="itemWrap">Element 6</div>
  <div class="itemWrap">Element 7</div>
  <div class="itemWrap">Element 8</div>
  <div class="itemWrap">Element 9</div>
</div>

编辑根据 OP 评论：

This is not what I am looking for as I need to be allowed different heights on each item element, but maintain equal margin WITHOUT adding empty space in the elements. Thats why I need to use three separate columns. Found a picture of what I need https://prod-foundation-forum.s3.amazonaws.com/uploads/part/part_image/93067/illustration.jpg

对于这种类型的布局，最适合您的是 masonry

响应式 div 列，其中列项目在屏幕调整大小时移动

Responsive div columns where column items get shifted on screen resize

html

css

grid

jquery

responsive