Announcement

Collapse
No announcement yet.

Using o-layout--row-reverse

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Using o-layout--row-reverse

    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.
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Hi Leslie,

    Yes, in the core/css/objects/layout.css file:
    Code:
    /* 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;
            }
        }
    Matt Zimmermann
    Director of UI/UX
    / Miva, Inc.

    Comment

    Working...
    X