Quick split divs

Question

I am working on a responsive site which, when on the desktop / large screen will be in the next layout.

• Headline
• Menu
• Content

Then, when the phone / small screen will be

• Headline
• Content
• Menu

How can I do that? The examples I saw seem to use absolute positioning, but I want it to be dynamic in screen size and in size / dynamically moved.

Thanks!

Answer 1

You can use the CSS3 property flexbox box-direction: reverse; . Write like this:

 .flex{ display: -moz-box; -moz-box-orient:vertical; -webkit-box-orient:vertical; display: -webkit-box; box-orient:vertical; display:box; width:100%; } .flex div, .header{ border:1px solid red; height:100px; } @media screen and (max-width : 400px){ .flex{ -moz-box-direction: reverse; -webkit-box-direction: reverse; box-direction: reverse; } } 

Check out http://jsfiddle.net/Hj5pz/

Answer 2

CSS cannot change the order of HTML elements, so absolute positioning was used in this case.

As an alternative, you may need a hidden duplicate of the section, which is displayed in one format and not in another, and vice versa.