Responsive Design, how to change order from div containers? - css

Question

I am just starting with responsive webdesign. I have a 2 column layout (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 -->
The content got 2 div container. On a small screen I want
Div1
Div2
On a large screen I want them swapped,
Div2
Div1
In my CSS I now got the following Media Query:
#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 swap the order around and if so, how can I do it? Anyone got maybe a link to a good tutorial?
Thanks a lot in advance !

Answer 1

The method used in the StackOverflow question "CSS positioning div above another div when 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 related properties to meet your end requirement.Also kindly note that you use use appropriate vendor prefixes for flexbox when you implement or use 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 -->