Responsive design, how to reorder from div containers?

Question

I am just starting out with responsive web design. I have a layout in 2 columns (sidebar and content).

<div class="main-container"> <div class="main wrapper clearfix"> <div class="con1"> <header> <h1>container 1 h1</h1> <p>text1</p> </header> <section> <h2>overview section h2</h2> <p> test</p> </section> </div> <div class="con2"> <header> <h1>container 2 article header h1</h1> <p></p> </header> <section> <h2>article section h2</h2> <p>text</p> </section> </div> <aside> <h3>aside</h3> <p>text</p> </aside> </div> <!-- #main --> </div> <!-- #main-container --> 

Content received 2 div containers. On a small screen I want

Div1

Div2

On the big screen, I want them to swap places,

Div2

Div1

In my CSS, I now received the following media request:

  @media only screen and (min-width: 768px) { .main div.con1 { float: right; width: 57%; } .main div.con2 { float: right; width: 57%; } 

Is it possible to change the order around, and if so, how can I do this? Has anyone got a link to a good tutorial?

Thank you very much!

Answer 1

The method used in the StackOverflow question "CSS positioning a div over another div if it is not in that order in the HTML" seems to be your best bet.

Answer 2

with js:

 //on load responsive_change_box_order(); //on resize window.addEventListener('resize', responsive_change_box_order ); function responsive_change_box_order() { if (window.matchMedia("(max-width: 1118px)").matches) { jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content")); } else{ jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner")); } 

}

Answer 3

This snippet uses flexbox and its related properties according to your final requirement. Also, kindly note that when using or using something like autoprefixer or prefixfree .

 .main{ display:flex; flex-direction:column } .con1{ order:2; background-color: green; } .con2{ order:1; background-color: red; } /*For Large screen only*/ @media(min-width:1200px){ .con1{ order:1; } .con2{ order:2; } } 

 <div class="main-container"> <div class="main wrapper clearfix"> <div class="con1"> <header> <h1>container 1 h1</h1> <p>text1</p> </header> <section> <h2>overview section h2</h2> <p> test</p> </section> </div> <div class="con2"> <header> <h1>container 2 article header h1</h1> <p></p> </header> <section> <h2>article section h2</h2> <p>text</p> </section> </div> <aside> <h3>aside</h3> <p>text</p> </aside> </div> <!-- #main --> </div> <!-- #main-container -->