HTML Code
<div id="AbuFlexBox" class="AbuFlexBox">
<div id="AbuLogDatePanel"><pre> AUG 2014 </pre></div>
<div id="AbuSlideShow">AbuSlideShow</div>
<div id="AbuControlPanel">
...
</div> <!-- End AbuControlPanel -->
<div id="AbuLogPanel" ><pre>-- AbuLogPanel -- </pre></div>
</div> <!-- End AbuFlexBox -->
CSS Code
#AbuFlexBox{
display: flex;
/* Then we define the flow direction and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
}
Now use Media Query to reorder Divs
media screen and (min-width: 292px) {
#AbuControlPanel { order: 4; } /* Re-Order Control and LogPanel */
#AbuLogPanel { order: 3; }
....
media screen and (min-width: 640px) {
#AbuControlPanel { order: 3; } /* Re-Order Control and LogPanel */
#AbuLogPanel { order: 4; }
....
Reference