響應式設計混合到內容列

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％;

}
}

我希望上述幫助。我不認爲我明白你計劃的日期。