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