响应式设计混合到内容列

Question

我一直在寻找一种可扩展的方式来从网页中获取2列内容，并以可扩展的方式响应地将其折叠到1列。这个问题在图片中非常整齐地陈述为here，并且被称为混合内容问题。

这篇文章现在已经有一年多的时间了，我想知道在跨浏览器框架或编码实践中是否取得了进展，以解决这个特定问题。

对于上下文，我有两列内容，最初按类别分隔，每列按日期排序。我希望在适当的时候将其折叠到1列，并按照日期排列该列的所有内容。

欢迎链接到教程，文章或其他资源。

Answer 1

有趣的是，响应式样本网站中的3列可折叠到2列，但不会低至1列。从技术上讲，这些列不折叠，随着屏幕宽度变窄，它们跳过一行。只有一列，列宽扩大到100％。我使它低于100％，因此出于美学原因有边界限制。对各种设备宽度使用“@media”方法。

请记住，我不使用100％作为全宽，因为在响应式设计中，如果将边框放到列中，即使1px边框宽度也会弹出水平滚动条。

以下列去全宽小于480像素的智能手机大小的屏幕：

例

.column1of1 { 宽度：100％; }

.column1of2 { width：48％; }

.column1of3 { width：31％;仅 }

@media屏幕和（最大宽度：480像素）{

.column1of1，.column1of2，column1of3 {
宽度：96％;
margin-left：1％;
font-size：80％;

}
}

我希望上述帮助。我不认为我明白你计划的日期。