Flexbox Direction and order in Safari

[p_r_i_m_e]

I’m having some issues getting flexbox direction and order to work in safari, I’ve made a pen adapted from Chris’s demo that uses a media query to change the direction and order when viewed at a mobile like width and it just won’t work in safari but is fine in chrome, I thought it must be a vendor prefix issue but I think I’ve caught all of those.

http://codepen.io/p_r_i_m_e/pen/nbGDl

any help would be greatly appreciated, all I want is a row layout before the media query and a re-ordered column layout when the media query takes effect.

thanks

[p_r_i_m_e]

I’m still stuck with this and the codepen above re-creates it in safari when resized, any ideas/help appreciated, thanks

[ElijahFowler]

You missed vendor prefixes for .main-content inside the media query. I cleaned up your CSS and added all the needed prefixes with Autoprefixer (keep in mind this goes with the last 2 browser version, browsers with over 1% of global usage, Firefox ESR, and Opera 12.1).

.page-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.main-content {
    background: white;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    width: 60%;
}
.main-nav {
    background: #ccc;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    width: 20%;
}
.main-sidebar {
    background: #ccc;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
    width: 20%;
}
.main-content,
.main-sidebar,
.main-nav {
    padding: 1em
}
body {
    background: #79a693;
    padding: 2em;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
h1,
h2 {
    font: bold 2em sans-serif;
    margin: 0 0 1em 0;
}
h2 {
    font-size: 1.5em
}
p {
    margin: 0 0 1em 0
}
@media screen and (max-width: 36em) { 
    .page-wrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .main-content {
        background: yellow;
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
        width: 100%;
    }
    .main-sidebar {
        width: 100%;
    }
    .main-nav {
        width: 100%;
    }
}

[Author]

Posts