Flexbox強制新列

Question

我想在600px以下實現這種布局：

這個布局高於600px：

---

文本和圖像的高度是可變的和未知的。

Flexbox非常適合源重新排序，但我無法強迫新列在跨瀏覽器中工作。

使用page-break-before: always; 在帶有圖像的div上強制使用一個新列 - 但這種技術僅適用於Firefox（39）。

這個JS Fiddle展示了我到目前為止的一個例子 （在Firefox中測試以查看工作示例）。

如何在Chrome和IE11中使用此布局？

使用圖像上的絕對位置將其移出文檔流不是一個選項，因為我需要它來推送下面的內容。

雖然我使用的是flexbox，但我會接受任何可以實現所需布局的（僅限CSS）方法。

Answer 1

如果你願意稍微搞亂一下源命令，你可以這樣做：

使用此訂單對容器進行分組：

1. Img容器
2. 標題容器
3. 內容容器

然后將圖像浮動到右側，標題和內容位於左側大尺寸。

在較小的尺寸下，為了實現視覺重新排序，您可以應用flexbox將它們重新排序為2 1 3。

因此，一種“混合”解決方案可能會解決這種情況。