Media query example (mobile first)

by makzan

HTML

<header>
    LOGO HERE
</header>
<article>
    Content Here
</article>
<aside>
    Side Bar here
</aside>
<footer>
    Copyright here.
</footer>

SCSS

* {
    box-sizing: border-box;
}
article, aside {
    border: 1px solid red;
}
aside {
    display: none;
}
@media screen and (min-width: 400px) {
    article {
        float: left;
        width: 70%;
    }
    aside {
        float: right;
        width: 30%;
        display: block;
    } 
}