rwd-flex example

/* RWD-Flex */
/* Copyright 2018 Andrew Porter */

* {
    box-sizing: border-box;
}

:root {
    width: 100%;
    height: 100%;
}

body {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flexbox;
    display: flex;

    margin: 0;
    min-width: inherit;
    min-height: inherit;
    width: auto;
    height: auto;

    flex-flow: column nowrap;
}

/* Desktop */
@media only screen and (min-width: 768px){

    .row {
        display: -webkit-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flexbox;
        display: flex;
        flex-flow: row nowrap;
    }

    .row.reverse {
        flex-direction: row-reverse;
    }

    .column {
        display: -webkit-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flexbox;
        display: flex;
        flex-flow: column nowrap;
    }

    .column.reverse {
        flex-direction: column-reverse;
    }

    .wrap {
        flex-wrap: wrap;
    }

    .wrap-reverse {
        flex-wrap: wrap-reverse;
    }

    div.image {
        min-width: 0;
        min-height: 0;
    }

    div.image > img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
    }

    img {
        object-fit: contain;
        -webkit-object-fit: contain;
        -o-object-fit: contain;
    }

    .dummy {
        flex: 1 0 auto;
        visibility: hidden;
    }

}

/* Mobile */
@media only screen and (max-width: 768px) {

    .row {
        display: -webkit-flex;
        display: flex;
        flex-flow: row wrap;
        width: 100%;
        flex: 0 0 auto;
    }

    .column {
        flex: 0 1 auto;
        flex-grow: 1;
    }

    div.image {
        min-width: 0;
        min-height: 0;
    }

    div.image > img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
    }

    img {
        object-fit: contain;
        -webkit-object-fit: contain;
        -o-object-fit: contain;
    }

    .dummy {
        display: none;
    }

}