Html 不使用Javascript创建响应交错行设计

我正在尝试为一些内容块设计交错布局，其中每个块的宽度完全相同，但高度可能不同。但是，每个项目都是连续的，因此它们需要从左到右或多或少清晰可辨（即：第1列有项目1和4，第2列有项目2和5，第3列有项目3）

这是我的想法：

这是我的第一个想法：

<?php
    $arr = array();
    $arr[] = array('title' => 'Day 1', 'img' => '/image1.png', 'text' => 'Text for item 1');
    $arr[] = array('title' => 'Day 2', 'img' => '/image2.png', 'text' => 'Text for item 2');
    $arr[] = array('title' => 'Day 3', 'img' => '/image3.png', 'text' => 'Text for item 3');
    $arr[] = array('title' => 'Day 4', 'img' => '/image4.png', 'text' => 'Text for item 4');
    $arr[] = array('title' => 'Day 5', 'img' => '/image5.png', 'text' => 'Text for item 5');

    $cols = array();
    $cols[0] = array();
    $cols[1] = array();
    $cols[2] = array();

    for($x = 0; $x <= count($arr); $x+=3) {
        $cols[0][] = $arr[$x];

        if (isset($arr[$x+1])) {
            $cols[1][] = $arr[$x+1];
        }

        if (isset($arr[$x+2])) {
            $cols[2][] = $arr[$x+2];
        }
    }

    foreach($cols as $key => $col) {
        echo '<div class="col'.$key.'">';
        foreach($col as $item) {
            echo '<div class="row-item">';
            echo 'Title: '.$item['title'].'<br />';
            echo 'Image: '.$item['img'].'<br />';
            echo 'Text: '.$item['text'];
            echo '</div>';
        }
        echo '</div>';
    }
?>

这将产生：

<div class="col0">
    <div class="row-item">
        Title: Day 1<br>
        Image: /image1.png<br>
        Text: Text for item 1
    </div>


    <div class="row-item">
        Title: Day 4<br>
        Image: /image4.png<br>
        Text: Text for item 4
    </div>
</div>


<div class="col1">
    <div class="row-item">
        Title: Day 2<br>
        Image: /image2.png<br>
        Text: Text for item 2
    </div>


    <div class="row-item">
        Title: Day 5<br>
        Image: /image5.png<br>
        Text: Text for item 5
    </div>
</div>


<div class="col2">
    <div class="row-item">
        Title: Day 3<br>
        Image: /image3.png<br>
        Text: Text for item 3
    </div>
</div>

标题：第一天

图像：/image1.png

文本：项目1的文本
标题：第4天

图像：/image4.png

案文：项目4的案文
标题：第2天

图像：/image2.png

文本：项目2的文本
标题：第5天

图像：/image5.png

案文：项目5的案文
标题：第3天

图像：/image3.png

案文：项目3的案文

不幸的是，当我被告知布局必须响应时，我遇到了一个问题，当在较小的屏幕上显示时，只有一行而不是三行，如下所示：

---

除了使用JavaScript在小屏幕上重新组织块，或者单独输出只在小屏幕上显示的块之外，我似乎想不出任何方法来解决这个特定问题。

Ahh，我将向您指出HTML5 CSS3

列的方向。克里斯·科伊尔是这样做的，还有一个

这是一个简单的CSS修复程序。您可以在@media查询中更改它们。如果我没有弄错的话，Pinterest使用这个，加上一个Javascript回退，用于不支持的浏览器

这意味着您的内容将（按源代码顺序）从上到下再从左到右流动，因此：

1 | 5 | 9
2 | 6 | 10
3 | 7 | 11
4 | 8 | 12

…就像报纸专栏一样。
PHP可能是不必要的，因为CSS伪类本身就应该做得更干净（也不那么详尽）了

第一个示例允许您针对div元素的每个奇数和偶数实例
.col
：

 .col:nth-child(odd) {
            /* Your Styles */
  }

 .col:nth-child(even) {
            /* Your Styles */
  }

或者，对于更具体的控件，这将允许您按外观顺序以元素为目标：

 .col:nth-child(1) {
            /* Your Styles */
  }

 .col:nth-child(2) {
            /* Your Styles */
  }

 .col:nth-child(3) {
            /* Your Styles */
  }

当然，现在这将帮助您为桌面环境设置列。移动或其他视口如何？媒体查询

  @media screen and (max-width: 1024px) {
        .col:nth-child(1) {
              /* Your Styles */
          }
   }

这将允许您在较小的视口中定义各个列的行为。尽可能多地复制媒体查询，以精确地确定它们在所有屏幕大小上的行为方式。
是否要求在屏幕上设置3列，即使在移动视口中也是如此？我建议它简单且响应迅速。不幸的是，它必须从左到右，然后从上到下清晰可见。嗯，我不确定如果没有相当多的JS逻辑就可以做到这一点。。。尤其是当它开始缩小时。您是否查看过flexbox

？自从我一直支持IE8以来，我就没有深入研究过它，但我听到了很多关于它的好消息。我不知道它是否会像你想要的那样垂直交错，不过：