Flexbox force new column

2018-06-09 03:23:39

I want to achieve this layout below 600px:

一列布局

And this layout above 600px:

两列布局

The height of the text and image is variable and unknown.

Flexbox works great for the source reordering but I'm having trouble forcing the new column to work cross browser.

Using page-break-before: always; on the div with the image forces a new column - but this technique only works in Firefox (39).

This JS Fiddle shows an example of what I have so far (test in Firefox to see working example).

How can I make this layout work in Chrome and IE11?

Using position absolute on the image to move it out the document flow is not an option as I need it to push the content below down.

Whilst I'm using flexbox I would accept any (CSS only) method that could achieve the desired layout.

If you're willing to mess with the source order a little bit, you could do something like:

Grouping container with this order inside:

Img container

Title container

Content container

Then float your image to the right, and have the title and content sit on the left at large size.

At smaller sizes, to achieve the visual reordering, you could apply flexbox to reorder them as 2 1 3.

So a kind of "hybrid" solution, could possibly solve this situation.

链接地址: http://www.djcxy.com/p/27478.html