响应式设计，可处理多列内容

Question

我想根据屏幕/设备宽度实现一个包含1或2列的UI。我正在使用Ajax将数据加载到这两个列中，并根据这些项高度附加它，因此两列都需要大约。相同数量的垂直空间。

如果用户始终保持浏览器窗口大小相同，则一切正常，因为初始加载将填充1或2列。但是当用户调整窗口大小时，问题就出现了我必须相应地整合所有内容：

• 较小的尺寸隐藏第2列，所有项目应按正确的顺序插入第1列
• 较大的尺寸显示两列，并从第1列获取一些内容并将其放入第2列

我可以使用Javascript来执行此操作，但我想知道是否可以在CSS中执行相同的操作？

例如，根据内容宽度，使用1..3列的Google+。

Answer 1

  

我想出了一个我自己的解决方案

只能使用CSS但可能不可行

在资源消耗方面可行。在页面上添加项目时，请始终在第1列中添加所有项，并为第2列中的位置添加其他CSS类。

响应式媒体查询将：

1. 隐藏第2列并在第1列中显示其他项目（基于CSS类）。
2. 显示第2列并隐藏第1列中具有相应CSS类的项目

当用户调整浏览器窗口大小时，这是避免Javascript处理的唯一方法。

问题

此功能的唯一问题是当您显示大量项目时，因为您的DOM平均会有50％的节点，因为大约一半的项目将在整个页面中重复（即使只有一个副本）重复项目将一次显示。