css - flotante - Bootstrap cambia el orden div con pull-right, pull-left en 3 columnas

pull-left bootstrap 4

Question

He estado trabajando en esto todo el día, pero no encuentro una solución. Tengo 3 columnas en una fila en un contenedor.

1: contenido correcto - pull-right

2: navegación - pull-left

3: contenido principal

Lo que se ve en las pantallas grandes:

------------------------------------------------
| Menu | Content | Right Content |
------------------------------------------------

Cómo debería verse en pantallas más pequeñas:

----------------------------
| Menu | Right Content |
| |------------------
| | Content |
----------------------------

Cómo se ve ahora:

------------------
| Right Content |
------------------
| Menu | Content |
------------------

Creo que es solo un problema flotante simple. Pero probé casi todas las posibilidades.

Answer 1

Bootstrap 3

Usando el sistema de grillas de Bootstrap 3:

<div class="container">
<div class="row">
<div class="col-xs-4">Menu</div>
<div class="col-xs-8">
<div class="row">
<div class="col-md-4 col-md-push-8">Right Content</div>
<div class="col-md-8 col-md-pull-4">Content</div>
</div>
</div>
</div>
</div>

Ejemplo de trabajo: http://bootply.com/93614

Explicación

Primero, establecemos dos columnas que permanecerán en su lugar sin importar la resolución de la pantalla ( col-xs-* ).

A continuación, dividimos la columna más grande, a la derecha, en dos columnas que colapsarán una encima de la otra en dispositivos de tamaño tableta e inferiores ( col-md-* ).

Finalmente, cambiamos el orden de visualización usando la clase coincidente ( col-md-[push|pull]-* ). Empuja la primera columna por la cantidad del segundo y tira la segunda por la cantidad del primero.

Answer 2

Prueba esto...

<div class="row">
<div class="col-xs-3">
Menu
</div>
<div class="col-xs-9">
<div class="row">
<div class="col-sm-4 col-sm-push-8">
Right content
</div>
<div class="col-sm-8 col-sm-pull-4">
Content
</div>
</div>
</div>
</div>

Bootply