Bootstrap Columna derecha en la parte superior en la vista móvil

171

Tengo una página Bootstrap como esta:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

Parece:

-----
|A|B|
-----

Entonces, si lo miro en un dispositivo móvil, la columna A está en la parte superior, pero quiero que la B esté en la parte superior. es posible? Lo intenté con un tirón, pero no funcionó.

html css twitter-bootstrap-3 schnawel007
fuente
2
Para Bootstrap 4 ver la respuesta de salmanhijazi
schnawel007

Respuestas:

268

Usar ordenamiento de columnas para lograr esto.

col-md-push-6"empujará" la columna hacia la derecha 6 y "empujará" la columna hacia la col-md-pull-6izquierda en "md" o en puertos de vista superiores. En cualquier puerto de vista más pequeño, las columnas volverán a estar en orden normal.

Creo que lo que desalienta a la gente es que debes poner B encima de A en tu HTML . Puede haber una forma diferente de hacer esto donde A puede ir por encima de B en el HTML, pero no estoy seguro de cómo hacerlo ...

MANIFESTACIÓN

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

view-port> = md

|A|B|

view-port <md

|B|
|A|
Schmalzy
fuente
66
@JackTheKnife Eche un vistazo a la otra respuesta a esta pregunta ... empuja o tira una columna por el ancho de la otra columna.
Schmalzy
1
@Schmalzy O sí, otra respuesta tiene una mejor explicación. También me pareció útil: scotch.io/tutorials/reorder-css-columns-using-bootstrap
JackTheKnife
1
Tener problemas con tres columnas, donde el orden de la pila debe ser central, izquierda, derecha.
Ganso
78

Vale la pena señalar que si está utilizando columnas que no son iguales a 6, entonces la cantidad de inserción no será igual al tamaño de columna inicial.

Si tiene 2 columnas (A y B) y desea que la columna A sea más pequeña y a la derecha en las ventanas "sm" o mayores, pero encima de una ventana móvil (xs), usaría lo siguiente:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

De lo contrario, la alineación de las columnas aparecerá desactivada.

apritch
fuente
¿Cómo puedo usar esto cuando tengo un ajuste de compensación?<div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>
Muddasir Abbas
29

Dirección Flexbox

Para Bootstrap 4, aplique uno de los siguientes a su div .row:

.flex-row-reverse

Para configuraciones receptivas:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
salmanhijazi
fuente
alguna idea de cómo lograr lo mismo en vuetify?
Rakibul Haq
11

En Bootstrap 4, supongamos que desea tener un pedido para pantallas grandes y otro para pantallas más pequeñas:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

Puedes omitir order-1y order-2más. Recién agregado para mayor claridad. El orden predeterminado será el orden en que aparecen las columnas en el html.

Para más información https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Abram
fuente
10

El siguiente código me funciona 

.row {
    display: flex;
    flex-direction: column-reverse;
}
Espada I
fuente
4

Tengo tres bootstrap 4 columnas de diferentes tamaños. A medida que la pantalla se hace más pequeña, la tercera columna se oculta, luego, cuando la pantalla se vuelve más pequeña y los divs se apilan, el orden cambia para que la columna 2 esté en la parte superior.

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

Espero que esto ayude. Me resultó difícil entender esto, pero finalmente llegué allí con la ayuda de este hilo, pero fue un poco impredecible.

M61Vulcan
fuente
3

Esto funcionó para mí en Bootstrap 4:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>
tumba
fuente
2

Solía:

.row {
   display: flex;
   flex-direction: row-reverse;
}
Eric Conner
fuente