I am currently utilizing Twitter Bootstrap 3 to design a website that is optimized for mobile devices. I want two elements (#1 and #2 as shown in my sketch) to appear in a sidebar on the left side of the screen when viewed on a large display, while the main content area (#3) should be displayed on the right side. However, when viewed on a smaller screen (mobile), I would like these elements to be stacked in the following order: #1, #3, #2.
When I implement the code snippet below, it results in the layout depicted in the third sketch:
<div class="row">
<div class="col-lg-5">#1</div>
<div class="col-lg-7">#3</div>
<div class="col-lg-5">#2</div>
</div>
The issue is that the #2 element gets pushed down to a new row. I have attempted to use column pushing and pulling techniques without success.
I have managed to achieve a somewhat crude version of what I desire by duplicating #2 and using CSS to conditionally show or hide it. However, this feels like a makeshift solution.
Is it possible to achieve the layout depicted in my sketch using Bootstrap (or another CSS grid system)?