Use CSS to reorder DIVs

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

• A Complete Guide to Flexbox