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

  • 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

    This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

    This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

    Accept