css - responsivas - ¿Es posible lograr este diseño de Mobile/Desktop usando Bootstrap?(u otra cuadrícula)

imagenes responsivas html

Question

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 (n. ° 1 y n. ° 2 en mi boceto) estén en una barra lateral a la izquierda, mientras que el área de contenido grande (n. ° 3) está a la derecha. En una pantalla pequeña (móvil), me gustaría que se apilen en orden # 1, # 3, # 2.

Realizando 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 puede ver, mi div # 2 es empujado hacia abajo a una nueva fila. He intentado empujar / tirar columnas sin suerte.

Puedo lograr una versión "sucia" de Quiero duplicando # 2 y ocultarlo / mostrarlo condicionalmente con CSS, pero esto parece ser un hack feo.

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

Answer 1

¿Te contentarías con (en el móvil) 3,1,2?

http://jsfiddle.net/chevybowtie/n9Ett/3/

<div class="container">
<div class="row">
    <div class="col-md-8 col-md-push-4 r">
        <p>#3 </p>
        <p></p>
    </div>
    <div class="col-md-4 col-md-pull-8">
        <div class="col-md-12 r"><p>#1 </p></div>
        <div class="col-md-12 r"><p>#2 </p></div>
    </div>
</div>
</div>

Answer 2

Intenta flotar a la derecha: (ver: http://bootply.com/78158 )

CSS :

.floatright{float:right;}
@media (max-width: 768px)
{    
    .floatright{float:none;}
}   

HTML :

<div class="container"> 
<div class="col-sm-5" style="height:50px;background-color:green;">1</div>
<div class="col-sm-7 floatright" style="height:100px;background-color:red;">3</div>
<div class="col-sm-5" style="height:50px;background-color:green;">2</div>
</div>