To tackle this design challenge, there are multiple potential solutions, but one that stands out is utilizing flexbox. A comprehensive guide to flexbox can be found here (https://css-tricks.com/snippets/css/a-guide-to-flexbox/), with a particular focus on the order property.
You can group all elements within a flex container, where each component displayed in your mockup will serve as flex-items (children of the flex container). On desktop view, you can adjust the order property of these flex-items accordingly.
flex-item1 { order: 1; }
flex-item-sidebar { order: 2; }
flex-item3 { order: 3; }
flex-item4 { order: 4; }
Although not crucial since flex items are usually arranged based on source order, for mobile CSS, the order should be configured as follows:
flex-item1 { order: 1; }
flex-item-sidebar { order: 3; } // pay attention to this modification
flex-item3 { order: 2; }
flex-item4 { order: 4; }
The order property dictates the sequence in which elements appear within the flex container, enabling you to manipulate the order via CSS and cater to different screen dimensions using min and max widths!
In the aforementioned link, you'll find various layout examples that can be experimented with to suit your requirements (https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-examples).
EDIT: I've swiftly crafted something on CodePen that should meet your needs. Try resizing the screen to witness it in action. https://codepen.io/anon/pen/vZQWXw#anon-login