Memo : Flexbox for mobile content [http://j.eremy.net/flexbox-for-mobile-content/]

flexbox.html

<div class="cols">
    <div class="col_one_third media_xs_order_two">
        <div>Sidebar</div>
    </div>

    <div class="col_two_thirds media_xs_order_one">
        <div>Main</div>
    </div>
</div>

<div class="cols">
    <div class="col_one_third media_xs_order_two">
        <div>One</div>
    </div>

    <div class="col_one_third media_xs_order_three">
        <div>Two</div>
    </div>

    <div class="col_one_third media_xs_order_one">
        <div>Three</div>
    </div>
</div>

flexbox.scss

$app-media-xs: 767px;

@mixin flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-Flex;
    display: flex;
}
@mixin flex-direction {
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    -ms-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
}
@mixin flex-order($val) {
    -webkit-box-ordinal-group: $val+1;
    -moz-box-ordinal-group: $val+1;
    -ms-flex-order: $val;
    -webkit-order: $val;
    order: $val;
}

// basic columns
.cols {
    clear: both;
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    > div {
        min-height: 1px;
    }

    // switch cols to flexbox with a media query
    @media screen and (max-width: $app-media-xs) {
        @include flexbox;
        @include flex-direction;
        >div {
            float: none !important;
            width: 100%;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }
}

.col_one_third {
    float: left;
    width: 33.33%;
    padding: 0 1em;
}
.col_two_thirds {
    float: left;
    width: 66.67%;
    padding: 0 1em;
}

// fixes the first and last column
.col_one_third {
    &:first-of-type {
        clear: left;
        padding: 0 0 2.077em 0;
    }
    &:last-of-type {
        clear: right;
        padding: 0 0 2.077em 0;
    }
}
.col_two_thirds {
    &:first-of-type {
        clear: left;
        padding-left: 0;
    }
    &:last-of-type {
        clear: left;
        padding-right: 0;
    }
}

@media screen and (max-width: $app-media-xs) {
    .media_xs_order_one {
        @include flex-order(0);
    }
    .media_xs_order_two {
        @include flex-order(1);
    }
    .media_xs_order_three {
        @include flex-order(2);
    }
}