How to change side by side divs to stack on mobile? - html

Question

I am trying to get my 2 divs (which are side by side) to change to stacked divs when viewed on mobile as shown in the fiddle, but I would like "two to be on top and "one" to be second.
Here is the code - http://jsfiddle.net/d3d4hb3t/
.one {
border: 1px solid green;
width: 29%;
float: left;
height: 100px;
}
.two {
border: 1px solid blue;
width: 69%;
float: right;
height: 100px;
}
#media (max-width: 767px) {
.one {
width: 100%;
}
.two {
width: 100%;
}
}
<div class="one">one</div>
<div class="two">two</div>
I know the simple solution would be to swap divs one and two around, but since the code I have is complicated, I was hoping there was an easier solution using just CSS.

Answer 1

Update
Added a flexbox approach below:
UPATED JSFIDDLE
.wrap {
display: flex;
}
.one {
width: 30%;
border: 1px solid green;
}
.two {
width: 70%;
border: 1px solid blue;
}
#media (max-width: 767px) {
.wrap {
flex-direction: column-reverse;
}
.one,
.two {
width: auto;
}
}
<div class="wrap">
<div class="one">1</div>
<div class="two">2</div>
</div>
Original answer
If you're stuck with the markup, you can still use the magic css table layout to change the order of the 2 divs. I updated it all, just to keep the consistency.
How those display values work, from MDN:
display: table; - behaves like <table> element.
display: table-cell; - behaves like <td> element.
display: table-header-group; - behaves like <thead> element.
display: table-footer-group; - behaves like <tfoot> element.
UPDATED JSFIDDLE
.wrap {
display: table;
border-collapse: collapse;
width: 100%;
}
.one,
.two {
display: table-cell;
}
.one {
width: 30%;
border: 1px solid green;
}
.two {
width: 70%;
border: 1px solid blue;
}
#media (max-width: 767px) {
.one {
display: table-footer-group;
width: 100%;
}
.two {
display: table-header-group;
width: 100%;
}
}
<div class="wrap">
<div class="one">1</div>
<div class="two">2</div>
</div>

Answer 2

Considering that you don't want swap them.
Here is the fiddle: https://jsfiddle.net/c8x49afg/
Just use position relative for divs pulling the second up and pushing the first down.
.one {
border: 1px solid green;
width: 29%;
float: left;
height: 100px;
}
.two {
border: 1px solid blue;
width: 69%;
float: right;
height: 100px;
}
#media (max-width:767px) {
.one {
position: relative;
top: 110px;
width: 100%;
}
.two {
position: relative;
top: -100px;
width: 100%;
}
}
<div class="wrapper">
<div class="one">
one
</div>
<div class="two">
two
</div>
</div>

Answer 3

I have needed to do this exact thing when working in an enterprise CMS where the source order could not be changed on mobile.
The solution I have used is to set a general container for the two Divs and make that display as a table. You can then set the Div you want to show first as display:table-group-header and set the one to show after it as display:table-group-footer
If you want to keep the colored borders, you may have to introduce an inner div for each that holds your content.
I have created a Fiddle that shows it in action:
http://jsfiddle.net/0brc4xc7/