Responsive web-design Hierarchy of information

[jbyrne]

Hello,

This is my first post, I am currently working on a responsive website design and wanted to know if what I was trying to achieve was possible before I move to the coding stage.

I want to create a hierarchy within the responsive website design where things don’t simply fall underneath each other. I have drawn two very simple diagrams of what I am looking to achieve. Does anyone know if this is possible to get this effect? And if so, what I would need to implement into my code other then float left and right for the opposing sides.

[Diagram 1](http://i40.tinypic.com/nyd16a.jpg “Diagram 1”)
[Diagram 2](http://i41.tinypic.com/ip5aq8.jpg “Diagram 1”)

Thank you in advance,

Justin

[jbyrne]

Just a note that the coloured boxes represent images and the grey lines, text. As I said it is a simple rough diagram to show what I mean :)

[Paulie_D]

See ‘FlexBox”.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[jbyrne]

Thanks for the comment,
My only issue with FlexBox is the browser support for it. It is not yet ready to be used mainstream on live projects. And the website I am designing is for a large company. I will keep looking

[waylaid]

With some creative ordering of the divs both layouts are possible but might get messy :P

Diagram 1:
http://codepen.io/waylaid/pen/CEIyL

Diagram-2:
http://codepen.io/waylaid/pen/auJGp

Drag to 480px to see the media query.

Edit: I’ve only looked in Chrome.

[waylaid]

And actually, neither work properly if you don’t have enough content in the left column.

[waylaid]

If you’re still interested I’ve re-jigged this and it seems to work now. I placed the green and pink blocks in a wrapper and floated that (and cleared right) instead. Have a look, try reducing the amount of text and it should still keep the layout. Fiddly though. Any thoughts?

Diagram 1: http://codepen.io/waylaid/pen/hGtFE

Diagram 2: http://codepen.io/waylaid/pen/IzuAt

[Author]

Posts