holy_grail_layout.css

.holy-grail {
    display: flex;
    flex-direction: column;
}

.holy-grail__header {
    flex: 0 0 100%;
    height: 3rem;
    padding: 1rem;
    background-color: #3F51B5;
}

.holy-grail__footer {
    flex: 0 0 100%;
    height: 2rem;
    padding: 1rem;
    background-color: #3F51B5;
}

.holy-grail__body {
    display: flex;
    flex-direction: column;
}

.holy-grail__sidebar {
    background-color: #ccc;
    padding: 1rem;
}

.holy-grail__sidebar--first {
    order: 1;
}

.holy-grail__sidebar--second {
    order: 3;
}

.holy-grail__content {
    padding: 1rem;
    order: 2;
}

@media all and (min-width: 720px) {
    .holy-grail__body {
        flex-direction: row;
    }

    .holy-grail__sidebar {
        flex: 0 0 180px;
    }

    .holy-grail__content {
        flex: 1;
    }
}