CSS Library

Professional Services Playground - Latest and Greatest
Templates

z. Code Example Template Multiple Methods

Status: In Progress

Status: Building

Working Example & Links

Brief Explanation & Notes

Explanation/Introduction

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.

Usability 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 --- */
    @media(max-width:767px){

    .style-xxxx{
    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{
    -webkit-box-ordinal-group
    : 0;
    -ms-flex-order: -1;
    order: -1;
    }/*INT:Reverse Col stack on Mobile - setting last column to show first*/

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

Working Example & Links #2

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.

Usability Notes

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

Design Notes

Design notes should be written here.

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 --- */
    @media(max-width:767px){

    .style-xxxx{
    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{
    -webkit-box-ordinal-group
    : 0;
    -ms-flex-order: -1;
    order: -1;
    }/*INT:Reverse Col stack on Mobile - setting last column to show first*/

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