Reverse the stack order of floated elements - html

Question

Jsfiddle: https://jsfiddle.net/pqbu2d70/
Requirements:
In responsive mode, the bottom box must be at the bottom, middle in the middle, top at the top
In desktop mode, the bottom box must be on the left side
No javascript
The height of the parent must be the height of the biggest child (so no absolute positioning)
You can see that as the fiddle stands now, the bottom is staying at the top as you reduce the width of the window. How can the above be achieved with just HTML / CSS?
.parent {
border: 1px solid blue;
overflow: hidden;
}
.random-height {
height: 200px !important;
}
.child {
height: 100px;
width: 30%;
border: 1px solid red;
float: left;
}
#media (max-width: 500px) {
.child {
width: 100%;
}
}
}
<div class="parent">
<div class="child random-height">bottom</div>
<div class="child">middle</div>
<div class="child">top</div>
</div>

Answer 1

I was able to achieve this by applying the following to both the parent and the children, but it seems...... wrong? https://jsfiddle.net/pqbu2d70/1/
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

Answer 2

I believe your best bet would be using direction. Change it in the parent to rtl (right to left), and in the children reset it to initial.
In order for it to work, instead of floating, you would need to set the children as inline-block elements.
I haven't solved every margin/padding issue, but it would be something like this:
Updated Fiddle
.parent {
border: 1px solid blue;
overflow: hidden;
direction: rtl;
}
.random-height{
height: 200px !important;
}
.child {
height: 100px;
width: 30%;
border: 1px solid red;
display: inline-block;
direction: initial;
}
#media (max-width: 500px) {
.child {
width: 100%;
}
}
<div class="parent">
<div class="child">top</div>
<div class="child">middle</div>
<div class="child random-height">bottom</div>
</div>