Round Rock / Austin, Texas
Drupal Web Developer

How to Flip Floating Divs Top and Bottom for Responsive

How to Flip Floating Divs Top and Bottom for Responsive

Responsive column stacking

For responsive layouts, sometimes you want to change the natural order of the floating divs to stack themselves from bottom to top instead of top to bottom.

Here's an example of where I did this for a Contact Us page that had a sidebar.  I wanted the sidebar at the top and the contact us form at the bottom.

    #content-and-sidebar-wrapper{
        display: flex;
        flex-direction: column;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        /* optional */
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
     }
   
      #content-area #content-area-right {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
        float:none;
      }
   
      #content-area #sidebar {
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        float:none;
      }