Flexbox强制新列

Question

我想在600px以下实现这种布局：

这个布局高于600px：

文字和图片的高度是可变且未知的。

Flexbox非常适合源重新排序，但我无法强迫新列在浏览器中工作。

在div上使用page-break-before: always;强制显示一个新列 - 但此技术仅适用于Firefox（39）。

This JS Fiddle shows an example到目前为止（在Firefox中测试以查看工作示例）。

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

使用图像上的绝对位置将其移出文档流不是一个选项，因为我需要它来推送下面的内容。

虽然我使用的是flexbox，但我会接受任何可以实现所需布局的（仅限CSS）方法。

Answer 1

如果你愿意稍微搞乱一下源命令，你可以这样做：

使用此订单对容器进行分组：

1. Img容器
2. 标题容器
3. 内容容器

然后将图像浮动到右侧，并将标题和内容放在左侧大尺寸。

为了实现视觉重新排序，您可以使用flexbox将它们重新排序为2 1 3。

因此，一种“混合”解决方案可能会解决这种情况。