Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Ordenamiento de columnas en Bootstrap 3

Estas en el tema de Ordenamiento de columnas en Bootstrap 3 en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 22/12/2014, 14:41
 
Fecha de Ingreso: diciembre-2014
Mensajes: 4
Antigüedad: 9 años, 2 meses
Puntos: 0
Pregunta Ordenamiento de columnas en Bootstrap 3

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> 
  #2 (permalink)  
Antiguo 22/12/2014, 17:55
(Desactivado)
 
Fecha de Ingreso: enero-2013
Mensajes: 289
Antigüedad: 11 años, 1 mes
Puntos: 10
Respuesta: Ordenamiento de columnas en Bootstrap 3

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> 
  #3 (permalink)  
Antiguo 25/12/2014, 13:29
 
Fecha de Ingreso: diciembre-2014
Mensajes: 4
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Ordenamiento de columnas en Bootstrap 3

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.
  #4 (permalink)  
Antiguo 25/12/2014, 20:41
(Desactivado)
 
Fecha de Ingreso: enero-2013
Mensajes: 289
Antigüedad: 11 años, 1 mes
Puntos: 10
Respuesta: Ordenamiento de columnas en Bootstrap 3

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/

Última edición por moginn; 25/12/2014 a las 21:01
  #5 (permalink)  
Antiguo 05/01/2015, 14:37
 
Fecha de Ingreso: diciembre-2014
Mensajes: 4
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Ordenamiento de columnas en Bootstrap 3

Impecable moginn, muchas gracias por tu ayuda!

Última edición por lucas829; 05/01/2015 a las 14:38 Razón: Error en el tipeo del nombre
  #6 (permalink)  
Antiguo 06/01/2015, 10:19
(Desactivado)
 
Fecha de Ingreso: enero-2013
Mensajes: 289
Antigüedad: 11 años, 1 mes
Puntos: 10
Respuesta: Ordenamiento de columnas en Bootstrap 3

Cita:
Iniciado por lucas829 Ver Mensaje
Impecable moginn, muchas gracias por tu ayuda!
jeje de nada! Creo que la única manera de hacerlo es con media queries

Etiquetas: responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:11.