这个布局高于600px：

文本和图像的高度是可变的和未知的.

FlexBox非常适合源重新排序,但是我无法强迫新列在跨浏览器中工作.

使用page-break-before：always;在带有图像的div上强制使用一个新列 – 但这种技术仅适用于Firefox(39).

到目前为止我所拥有的This JS Fiddle shows an example(在Firefox中测试看工作示例).

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

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

虽然我使用的是flexBox,但我会接受任何可以实现所需布局的(仅限CSS)方法.