CSS Library

Professional Services Playground - Latest and Greatest

z2. Code Example Template

Status: In Progress

Status: Awaiting Testing

Status: Under Review

Status: Approved For Use

Author: John Doe

Working Example & Links

Brief Explanation & Notes


This style is very useful to add to sites for use on calendar and news archive pages, as well as have available anywhere else on the site where you would want the stacking order of a row reversed on mobile. This row style can be applied only where needed. This can also be applied on the master layout for sites that have a left nav and a page content area under the left nav that should show below the main page content area.

The CSS in the first option reverses the order of all columns, so naturally if you had 4 or more columns they would all be stacked in the reverse order, which may not be desired, but this row style can be applied on a row by row basis. If you only want the last column affected, use the 2nd method.

Build Notes

Build notes about how this can be used should be written here.

Design Notes

Design notes should be written here.

Code for Implementation

List of 2 items.

  • Option 1- Reverse all Rows - Custom CSS: Row Style in Mobile Media Query

    On the Mobile Media query, add flexbox to reverse the order of columns.
    /* --- Mobile --- */
    @media(max-width:767px) {

    /*INT:Reverse Col stack on Mobile - setting flex so the order of columns can be reversed*/
    .style-xxxxx{ display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;}

    }/* ---END Mobile --- */

  • Option 2 - Set only last column on top - Custom CSS in Mobile Media Query

    Use this option if you only want to affect the last column. The first step is to apply flex and direction: column to the row in the mobile media query. Then target the last column, using onMessage's last-col selector, and set the order of that column to the first with a -1. Using a negative number will place the item ahead of all others.
    /* --- Mobile --- */

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }/*INT:Reverse Col stack on Mobile - setting flex, so the last column can be reordered*/

    .style-xxxx .last-col{
    : 0;
    -ms-flex-order: -1;
    order: -1;
    }/*INT:Reverse Col stack on Mobile - setting last column to show first*/

    }/* ---END Mobile --- */
Designed and built by a monkey with a paintbrush
Maintained by a group of children who call themselves professionals