To achieve the desired layout, CSS Grid is typically recommended, but it can also be done using CSS Flexbox.
Simply create a wrapper div with three nested divs inside for a mobile-first approach, and set .content to flex: 1 to expand the height of the viewport.
For desktop (using
@media screen and (min-width: 1000px)
), adjust the order of
.navigation and
.content, and assign appropriate widths to each
div. The only change needed for
div.wrapper is adding
flex-flow: column wrap for correct wrapping.
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
}
.box {
display: flex;
}
.content {
flex: 1;
}
@media screen and (min-width: 1000px) {
.wrapper {
flex-flow: column wrap;
}
.navigation {
order: 2;
}
.content {
order: 3;
}
.image,
.navigation {
width: 200px;
flex: 50%;
}
.content {
width: calc(100% - 200px);
flex: 0 0 100%;
}
}
/* Generic styling */
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.image {
background: orange;
height: 60px;
}
.content {
background: lightblue;
}
.navigation {
background: lightgreen;
height: 60px;
}
<div class="wrapper">
<div class="box image">Image</div>
<div class="box content">Content</div>
<div class="box navigation">Navigation</div>
</div>