Flexbox强制新增列
我想要达到600px以下的布局：
这个600px以上的布局：
文字和图像的高度是可变的和未知的。
Flexbox非常适用于重新排序的源码，但我无法强制新列跨浏览器工作。
使用page-break-before: always; 在与图像div强制一个新的列 - 但这种技术只适用于Firefox（39）。
这个JS Fiddle展示了我到目前为止的一个例子（在Firefox中测试以查看工作示例）。
我怎样才能使这种布局在Chrome和IE11中工作？
使用图像上的绝对位置将其移出文档流程不是一种选择，因为我需要它将内容向下推送。
虽然我使用flexbox，但我会接受任何可以实现所需布局的（仅限CSS）方法。
如果您愿意稍微混淆源代码顺序，您可以执行如下操作：
将此订单分组到容器中：
然后将图像浮动到右侧，并将标题和内容放在左侧大尺寸。
在较小的尺寸下，为了实现视觉重新排序，您可以应用flexbox将它们重新排序为2 1 3。
所以一种“混合”解决方案，可能可以解决这种情况。
链接地址: http://www.djcxy.com/p/27477.html