css - getbootstrap - border div bootstrap 3
¿Reordenar divs responsivamente con Twitter Bootstrap? (4)
Estoy trabajando con Twitter Bootstrap v3 y quiero reordenar los elementos de manera responsable, utilizando el orden y la offsetting columnas .
Así es como me gustaría usar mis elementos. En los -xs interrupción -xs o -sm , con el div que contiene apilados 4 en una fila:
En -md o -lg puntos de interrupción, con el div que contiene apilados 2 en una fila:
Este es el código actual. Sé cómo establecer las clases en el div que contiene, pero no en A, B y C:
<div class="row">
<div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="row">
<div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
<div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
<div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
</div>
</div>
... more containing divs...
</div>
No puedo entender cómo obtener A, B y C en el orden correcto con el pedido y la offsetting la columna de Bootstrap 3. ¿Es realmente posible?
Esto es todo lo que tengo de usar JSFiddle: http://jsfiddle.net/3vYgR/
Creo que quieres mirar las clases de push y pull ...
<div class="row">
<div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
<div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
<div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>
Demostración: http://bootply.com/77853
Cualquier razón para no utilizar métodos más tradicionales en esto, es decir. ¿B flotando a la izquierda y los otros elementos a la derecha?
Al igual que si agregaste esto al CSS actual en tu jsfiddle:
.b {
float: left;
width: 50%;
height: 100px;
}
.a, .c {
float: right;
width: 50%;
height: 50px;
}
Ver http://jsfiddle.net/E6BFk/
No estoy seguro de que el orden de las columnas de Bootstrap pueda lograr el efecto de apilamiento, quizás solo el reordenamiento ... Aunque la documentación es bastante escasa en esa característica.
La respuesta proporcionada por @skelly es un excelente punto de partida, pero causa algunos problemas de alineación vertical. Imagina que A es un div alto , entonces C se alinea verticalmente debajo de A .:
[A] [B]
[ ]
[C]
Además, si desea llevar esto un paso más allá, es posible que también deba considerar el uso de bloques de clearfix . Por ejemplo;
<!-- Add clearfix for only the required viewport(s) -->
<div class="clearfix visible-md-block visible-lg-block"></div>
Sin clearfix md o lg podría terminar como:
[A] [B]
[C] [D]
Esto es particularmente importante si desea más de 2 elementos en la "columna" final, o las alturas de los elementos comienzan a desalinear a otros elementos.
Con el clearfix md o lg sería:
[A] [B]
[C]
[D]
Ejemplo de violín: http://jsfiddle.net/L5174o8d/
Probé el empujar / tirar como se muestra en la respuesta de Skelly pero C termina en una nueva fila una vez que se aplican las alturas: http://www.bootply.com/Q3djHYawgb#
Si B puede mostrarse primero cuando se muestra en tamaño pequeño, entonces creo que tiene más sentido crear una fila dentro de la columna del lado derecho para contener A y C:
<div class="containing row">
<div class="b col-xs-12 col-md-6">Content of B</div>
<div class="ac col-xs-12 col-md-6">
<div class="row">
<div class="a col-xs-12">Content of A</div>
</div>
<div class="row">
<div class="c col-xs-12">Content of C</div>
</div>
</div>
</div>