css - orden - formulario dos columnas bootstrap

Cambia el orden de col-*-12 columnas en Bootstrap usando push/pull

Question

Tengo dos columnas del mismo tamaño ( .col-xs-12 ) y cambiaría su lugar cuando el tamaño de la pantalla corresponda a la de un dispositivo móvil. Los colocaría en el orden inverso.

He leído que las directivas de arranque y extracción ayudan a lograr eso, pero ¿es posible cambiar el lugar de dos columnas del mismo tamaño con las siguientes clases?

div.col-xs-12.col-xs-push-12
  p test1
div.col-xs-12.col-xs-pull-12
  p test2

Answer 1

En Bootstrap 4 , puede cambiar el orden de las columnas de ancho completo (12 unidades) utilizando las clases de ordenamiento de flexbox.

Actualización 2017 - Bootstrap 4 alpha 6

En 3.x, solo podía empujar / arrastrar columnas hacia la izquierda o hacia la derecha (horizontalmente). Con los nuevos utilitarios de ordenamiento de Flexbox en 4.x, ahora es posible cambiar el orden de las columnas verticalmente ...

<div class="container">
  <div class="row">
    <div class="col-12">1</div>
    <div class="col-sm-12 flex-first flex-sm-unordered">2 (first on xs)</div>
  </div>  
</div>

http://www.codeply.com/go/7RUJORgxBK

Actualiza Bootstrap 4 Beta

Los alfa ordenados flexibles han cambiado a order- classes.

<div class="container">
  <div class="row">
    <div class="col-12 order-sm-1 order-2">1</div>
    <div class="col-sm-12 order-1">2 (first on xs)</div>
  </div>  
</div>

https://www.codeply.com/go/VUjKsM3cUD

Answer 2

En caso de que alguien venga aquí con un problema similar al mío, solo encontrar push / pull no se ajusta a tus necesidades, porque o col-xs-12 no tirará / empujará o usará más de 2 columnas hace que sea más difícil descifrar el push / extraer valores aquí es mi solución.

A continuación se muestra la solución elegante de @hashemquolami

@media (max-width: 767px) {
 .row.reorder-xs {
   transform: rotate(180deg);
   direction: rtl; /* Fix the horizontal alignment */
 }

 .row.reorder-xs > [class*="col-"] {
   transform: rotate(-180deg);
   direction: ltr; /* Fix the horizontal alignment */
 }
}

Aunque este enfoque funciona bien, tengo una solución diferente:

La grilla de bootstrap funciona al flotar las columnas a la izquierda, esto puede ser fácilmente alterado con css. Observe el marcado a continuación, ya que la bonificación col-md-offset-1 se invirtió para emular 5 columnas centradas.

HTML

<div class="container">
 <div class="row reverseOrder">
     <div class="col-md-2 col-md-offset-1">A</div>
     <div class="col-md-2">B</div>
     <div class="col-md-2">c</div>
     <div class="col-md-2">d</div>
     <div class="col-md-2 ">e</div>
 </div>
</div>

CSS

@media screen and ( min-width: 992px) {
  .reverseOrder [class^="col-"] {
      float: right;
  }
  .reverseOrder .col-md-offset-1 {
     margin-right: 8.333333333333332%;
     margin-left: 0px;
  }
}

JSFIDDLE

Answer 3

En realidad, no puede reordenar las columnas que tienen .col-*-12 mediante clases de ayuda push / pull . La suma de columnas excede las 12 columnas predeterminadas que se definen por @grid-columns .

Puede cambiar el orden de las columnas en HTML y luego usar las clases de orden en pantallas más grandes de la siguiente manera:

EJEMPLO AQUÍ

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div>

O utilice este enfoque elegante para invertir el orden de las columnas que se colocan verticalmente una debajo de la otra:

EJEMPLO AQUÍ

@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl; /* Fix the horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr; /* Fix the horizontal alignment */
  }
}

Vale la pena señalar que las transformaciones CSS también son compatibles con IE9 ; No olvide agregar prefijos de proveedor.

Answer 4

Puedes hacerlo totalmente, consulta el orden de la columna de cuadrícula de Bootstrap

Pero, por supuesto, su ejemplo no tendrá ningún efecto ya que xs-12 es una columna de ancho completo, por lo que esto solo se aplicará a los modelos donde la suma de las columnas sea 12 (o 16 si lo hace si personaliza su red Bootstrap). Vea el ejemplo de Bootstrap en esa misma página con fines ilustrativos:

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Answer 5

Si necesita reordenar cols para un caso receptivo como

div.col-xs-12.col-sm-9 # this should be on the bottom for col-xs-12
  p test1
div.col-xs-12.col-sm-3 # this should be on the top for col-xs-12
  p test2

podría usar una clase .pull-right e invertir el orden de las columnas.

div.col-xs-12.col-sm-3.pull-right
  p test2
div.col-xs-12.col-sm-9
  p test1

entonces están en orden para col-xs-12 y aparecen correctamente para los otros puntos de corte.

Answer 6

Tuve el mismo problema y lo resolví de esta manera:

HTML

<div class="col-md-10 col-sm-10 col-xs-12 more-than" style="display: none;">
    <p>test</p>     
</div>  
<div class="col-md-2 col-sm-2 col-xs-12">
    <p>test</p> 
</div>
<div class="col-md-10 col-sm-10 col-xs-12 less-than">
    <p>test</p>                 
</div>

CSS

@media (max-width: 767px){
    .less-than {
        display: none;
    }
    .more-than {
        display: block !important;
    }
}