This particular challenge has proven to be quite difficult for me, and I have a feeling that I am overlooking something simple.
My goal is to create a layout with a fixed-width left sidebar and a responsive variable-width content section on the right.
The tricky part is that I want the HTML code for the left sidebar to come after the content section so that I can easily reposition them for mobile screens without using floats. This way, the content will appear above the sidebar when the resolution is reduced, both sections taking up 100% of the width.
.header {
width: 100%;
background-color: green;
}
.content {
background-color: red;
height: 100px;
float: right;
}
.sidebar {
background: blue;
width: 240px;
height: 100px;
}
@media (max-width: 750px) {
.content {
float: none;
width: 100%;
}
.sidebar {
width: 100%;
}
}<div class="header">Top</div>
<div class="content">Content (right on widescreen, top on less than 750px</div>
<div class="sidebar">Sidebar (left on widescreen, bottom on less than 750px</div>