Menu
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.
788
Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.
Making things wrap If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap , or use the shorthand flex-flow with values of row wrap or column wrap . Items will then wrap in the container.
Flex row / column break You can define a CSS class that would force the element it is applied on to create a row / column break in a flex layout. Take care not to use no-wrap when defining the flex container, and insert a div with class flex-break where you need.
You can simply use the CSS justify-content property with the value space-between to set space between flexbox items. In the following example the flex container has 4 items where each flex item has a width of 20%, and the remaining 20% space is distributed evenly between the flex items.
If you're willing to mess with the source order a little bit, you could do something like:
Grouping container with this order inside:
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.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
