[SOLUCIONADO] Ordenamiento de columnas en Bootstrap 3

lucas829 · #1 (**permalink**) 22/12/2014, 14:41

Estimados, usando como framework Bootstrap 3 estoy haciendo la maqueta de una web responsive donde las columnas del cuerpo se comportan de la siguiente manera:

En lg y md:

[ 1 ] [ 2 ] [ 3 ] [ 4 ]

y en sm queda así:

[ 1 ] [ 2 ]
[ 3 ] [ 4 ]

Mi problema es que cuando se apila para xs quedan así:
[ 1 ]
[ 3 ]
[ 2 ]
[ 4 ]

cuando en realidad quisiera que quedaran en orden, o sea
[ 1 ]
[ 2 ]
[ 3 ]
[ 4 ]

Pistas o sugerencias para lograrlo? Desde ya, muchas gracias

Actualmente mi código sería algo así:

Código HTML:

<div class="row">

  <div class="col-md-3 col-sm-6">
      Columna 1
  </div>

  <div class="col-md-3 col-md-push-3 col-sm-6">
      Columna 3
  </div>

  <div class="col-md-3 col-md-pull-3 col-sm-6">
      Columna 2
  </div>

  <div class="col-md-3 col-sm-6">
      Columna 4
  </div>

</div>

moginn · #2 (**permalink**) 22/12/2014, 17:55

Código HTML:

 <div class="row">

    <div class="col-md-3 col-sm-6">
	Columna 1
    </div>

    <div class="col-md-3 col-sm-6">
	Columna 2
    </div>

    <div class="col-md-3 col-sm-6">
	Columna 3
    </div>

    <div class="col-md-3 col-sm-6">
	Columna 4
    </div>

  </div>

lucas829 · #3 (**permalink**) 25/12/2014, 13:29

Gracias por responder moginn, pero me di cuenta que me equivoqué en la pregunta.

Mi idea es que quede en sm así:
[ 1 ] [ 3 ]
[ 2 ] [ 4 ]

por eso usaba los pull y push y en xs no logro ordenarlo.

Ahora corrijo la pregunta. Saludos!
Edit: No puedo ni editar el tema ni borrarlo... Muy poco amigable el sistema jaja.

moginn · #4 (**permalink**) 25/12/2014, 20:41

te he encontrado una solución usando media queries

Código HTML:

<html>
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <style>
      @media (max-width: 767px) {
	.container{display: table; width: 100%;}
	.first{display: table-footer-group;}
	.second{display: table-header-group;}
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
	  <div class="col-sm-6 col-md-3">
	      Columna 1
	  </div>

	  <div class="col-sm-6 col-md-3 col-md-push-3 first">
	      Columna 3
	  </div>

	  <div class="col-sm-6 col-md-3 col-md-pull-3 second">
	      Columna 2
	  </div>

	  <div class="col-sm-6 col-md-3">
	      Columna 4
	  </div>
      </div>
  </div> 
  </body>
</html>

aquí está explicado el problema
http://blog.developers.ba/bootstrap-...order-columns/

lucas829 · #5 (**permalink**) 05/01/2015, 14:37

Impecable moginn, muchas gracias por tu ayuda!

moginn · #6 (**permalink**) 06/01/2015, 10:19

Cita:

Iniciado por lucas829

Impecable moginn, muchas gracias por tu ayuda!

jeje de nada! Creo que la única manera de hacerlo es con media queries