How to change the ordering of two divs when on mobile? - css

Question

I am trying to change the order of two divs in a container when they get to mobile size.
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
Is this possible to change it so that it will change to
<div class="container">
<div class="div2"></div>
<div class="div1"></div>
</div>

Answer 1

Depending on which browsers you need to support, you can use flexbox to switch the order of the divs.
.container {
display: flex;
}
.div1 {
order: 0;
}
#media screen and (min-width: 780px) {
.div1 {
order: 1;
}
}
JS Fiddle

Answer 2

You can do it using flexbox by reversing the order.
.container {
display: flex; /* or inline-flex */
flex-direction: column;
}
#media(min-width:768px){
.container {
flex-direction: column-reverse;
}
}
http://codepen.io/partypete25/pen/oxJNqz

Answer 3

You can use pure css to do that
.container{
display:table;
}
.div1{
display:table-footer-group;
}
.div2{
display:table-header-group;
}
make sure you put it in a #media query.

Answer 4

You can use two separate classes and make only one visible at a time depending on the media width.
First create you CSS
//This container is only visible on devices with 1025px or more such as iPad in landscape or portrait view
#media screen and (min-width: 1025px) {
.desktop-container {
Display:none;
}
}
// This container is only visible on smaller devices with screen size 360px - 1024px
#media screen and (min-width:360px) and (max-width:1024px) {
.mobile-container {
Display:none;
}
}
Now create your markup...
<div class="desktop-container">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="mobile-container">
<div class="div2"></div>
<div class="div1"></div>
</div>