Estoy usando Twitter Bootstrap 3 para crear un sitio web listo para dispositivos móviles. En una pantalla grande, me gustaría que dos elementos (# 1 y # 2 en mi boceto) estén en una barra lateral a la izquierda, mientras que el área de contenido grande (# 3) está a la derecha. En una pantalla pequeña (móvil), me gustaría que se apilaran en el orden # 1, # 3, # 2.

Haciendo los siguientes resultados en el tercer boceto:

<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>

Como puedes ver, mi # 2 div es empujado hacia abajo a una nueva fila. He intentado empujar / tirar columnas sin suerte.

Puedo lograr una versión "sucia" de lo que quiero duplicando # 2 y ocultándola / mostrando condicionalmente con CSS, pero esto parece un truco feo.

¿Se puede lograr mi boceto utilizando Bootstrap (u otro sistema de cuadrícula CSS)?