Round Rock / Austin, Texas
Drupal Web Developer

How to Flip Floating Divs Top and Bottom for Responsive

Error message

Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in drupal_get_feeds() (line 394 of /home/thefoxes/foxwebdevelopment.com/includes/common.inc).

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;
      }