Using o-layout--row-reverse

[lesliekirk]

Is it possible to use o-layout--row-reverse based on the size of the screen? I'd like to use it for a small screen layout to rearrange the order of a layout.

[Matt Zimmermann]

Hi Leslie,

Yes, in the core/css/objects/layout.css file:

/* Layout Display Direction.
 * The flex-direction property specifies the direction of the flexible items
 * inside the flex container. The default value of flex-direction is row
 * (left-to-right, top-to-bottom).
   =========================================== */
/**
 * To reverse the layout direction, use o-layout--row-reverse.
 */
.o-layout--row-reverse {
    flex-direction: row-reverse;
}

/**
 * Use o-layout--column to set the flex items vertically.
 */
.o-layout--column {
    align-items: flex-start;
    flex-direction: column;
}

    .o-layout--column > .o-layout__item[class*='u-width-12'],
    .o-layout--column-reverse > .o-layout__item[class*='u-width-12'] {
        width: 100%;
    }

/**
 * Same as column, but reversed.
 */
.o-layout--column-reverse {
    align-items: flex-start;
    flex-direction: column-reverse;
}


    @media screen and (min-width: 48em) {
        .o-layout--row--m {
            flex-direction: row;
        }

        .o-layout--row-reverse--m {
            flex-direction: row-reverse;
        }

        .o-layout--column--m {
            flex-direction: column;
        }

        .o-layout--column-reverse--m {
            flex-direction: column-reverse;
        }
    }


    @media screen and (min-width: 60em) {
        .o-layout--row--l {
            flex-direction: row;
        }

        .o-layout--row-reverse--l {
            flex-direction: row-reverse;
        }

        .o-layout--column--l {
            flex-direction: column;
        }

        .o-layout--column-reverse--l {
            flex-direction: column-reverse;
        }
    }


    @media screen and (min-width: 90em) {
        .o-layout--row--w {
            flex-direction: row;
        }

        .o-layout--row-reverse--w {
            flex-direction: row-reverse;
        }

        .o-layout--column--w {
            flex-direction: column;
        }

        .o-layout--column-reverse--w {
            flex-direction: column-reverse;
        }
    }