html - left - change order columns bootstrap 4
¿Cómo cambio el orden de las columnas de Bootstrap 3 en el diseño móvil? (7)
Estoy haciendo un diseño sensible con una barra de navegación superior fija. Debajo tengo dos columnas, una para la barra lateral (3) y otra para el contenido (9). Que en el escritorio se ve así
barra de navegación
[3] [9]
Cuando cambio el resize a móvil, la navbar se comprime y se oculta, luego la barra lateral se apila sobre el contenido, de esta manera:
barra de navegación
[3]
[9]
Me gustaría tener el contenido principal en la parte superior, por lo que debo cambiar el orden en el móvil a esto:
barra de navegación
[9]
[3]
Encontré este artículo que cubre los mismos puntos, pero la respuesta aceptada se ha editado para decir que la solución no se aplica a la versión actual de Bootstrap.
¿Cómo puedo reordenar estas columnas en el móvil? O alternativamente, ¿cómo puedo obtener el grupo de lista de la barra lateral en mi barra de navegación de expansión?
Aquí está mi código:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">Brand Title</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right"><!--original navbar-->
<li class="active"><a href="#">Home</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
</div>
</div><!--End Navbar Div-->
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Lorem ipsum</h4>
<p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
</div>
</div><!--end sidebar-->
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
Main Content
</div>
</div>
</div><!--end main content area-->
Comenzando con la versión móvil primero, puede lograr lo que quiere, la mayor parte del tiempo.
Ejemplos aquí:
http://jsbin.com/wulexiq/edit?html,css,output
<div class=''row no-gutters''>
<div class=''col-12''>
A
</div>
<div class=''col-12''>
<div class=''row no-gutters''>
<div class=''col-12 col-md-6''>
C
</div>
<div class=''col-12 col-md-6 order-md-first''>
B
</div>
</div>
</div>
<div class=''col-12''>
D
</div>
</div>
En Bootstrap 4 , si quieres hacer algo como esto:
<div class="container">
<h1>PUSH - PULL Bootstrap demo</h1>
<h2>Version 1:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 col-sm-push-3 green">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 2:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 3:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 cyan">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW XS-SMALL SCREEN
</div>
</div>
<h2>Version 4:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 beige">
MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
</div>
Debe invertir el orden de B y luego C, luego aplicar order-{breakpoint}-first to B. Y aplique dos configuraciones diferentes, una que hará que compartan los mismos cols y otra que los haga tomar todo el ancho de los 12 cols:
Pantallas más pequeñas: 12 cols a B y 12 cols a C
Pantallas más grandes: 12 cols entre la suma de ellas ( B + C = 12)
Me gusta esto
Mobile | Desktop
-----------------------------
A | A
C | B C
B | D
D |
Demostración: https://codepen.io/anon/pen/wXLGKa
Esto es bastante fácil con jQuery usando insertAfter () o insertBefore ().
<div class="left">content</div> <div class="right">sidebar</div>
<script>
$(''.right'').insertBefore(''left'');
</script>
Que simple
Si desea establecer una condición para dispositivos móviles, puede hacerlo así.
<script>
var $iW = $(window).innerWidth();
if ($iW < 992){
$(''.right'').insertBefore(''.left'');
}else{
$(''.right'').insertAfter(''.left'');
}
</script>
ejemplo https://jsfiddle.net/w9n27k23/
Las respuestas aquí funcionan para solo 2 celdas, pero tan pronto como esas columnas tengan más en ellas, puede llevar a un poco más de complejidad. Creo que he encontrado una solución generalizada para cualquier número de celdas en varias columnas.
Metas
Obtenga una secuencia vertical de etiquetas en el móvil para organizarlas en el orden que sea que requiera el diseño en la tableta / computadora de escritorio. En este ejemplo concreto, una etiqueta debe entrar en el flujo antes de lo que normalmente lo haría, y otra más tarde de lo que normalmente lo haría.
Móvil
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
Tableta +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
Por lo tanto, el titular debe mezclarse directamente en la tableta +, y técnicamente, también lo hace desc: se encuentra sobre la etiqueta de título que la precede en el móvil. Verás que en un momento, 4 subtítulos también están en problemas.
Supongamos que cada celda puede variar en altura, y debe estar al ras con la siguiente celda (descartando trucos débiles como una mesa).
Al igual que con todos los problemas de Bootstrap Grid, el paso 1 es darse cuenta de que el HTML debe estar en orden móvil, 1 2 3 4 5, en la página. Luego, determine cómo hacer que la tableta / computadora de escritorio se reordene de esta manera, idealmente sin Javascript.
La solución para obtener 1 headline y 3 qty para sentarse a la derecha, no a la izquierda, es simplemente colocarlos pull-right . Esto se aplica a CSS float: right , lo que significa que encuentran el primer espacio abierto que encajarán a la derecha. Puede pensar que el procesador CSS del navegador funciona en el siguiente orden: 1 encaja en la esquina superior derecha. 2 es el siguiente y es regular ( float: left ), por lo que va a la esquina superior izquierda. Luego 3, que es float: right para que salte por debajo de 1.
Pero esta solución no fue suficiente para 4 caption ; porque las 2 celdas de la derecha son tan cortas, 2 image de la izquierda tienden a ser más largas que las dos combinadas. Bootstrap Grid es un truco flotante glorificado, lo que significa que 4 caption es float: left . Con 2 image ocupando tanto espacio a la izquierda, 4 caption intentan encajar en el siguiente espacio disponible, a menudo en la columna derecha, no en la izquierda donde la queríamos.
La solución aquí (y más en general para cualquier problema como este) fue agregar una etiqueta de hackeo, oculta en el móvil, que existe en la tableta + para eliminar los subtítulos, que luego se cubre con un margen negativo, como este:
[2 image ][1 headline]
[ ][3 qty ]
[ ][4 hack ]
[5 caption][6 desc ^^^]
[ ][ ]
http://jsfiddle.net/b9chris/52VtD/16633/
HTML:
<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>
CSS:
#hack { height: 50px; }
@media (min-width: @screen-sm) {
#desc { margin-top: -50px; }
}
Entonces, la solución generalizada aquí es agregar etiquetas de pirateo que pueden desaparecer en el móvil. En la tableta +, las etiquetas de pirateo permiten que las etiquetas mostradas aparezcan antes o después en el flujo, luego se suben o bajan para cubrir esas etiquetas de truco.
Nota: He utilizado alturas fijas por el simple ejemplo en el archivo jsfiddle vinculado, pero el contenido real del sitio en el que estaba trabajando varía en altura en las 5 etiquetas. Se procesa adecuadamente con una variación relativamente grande en las alturas de las etiquetas, especialmente en la imagen y el desc.
Nota 2: Dependiendo de su diseño, puede tener un orden de columnas lo suficientemente consistente en la tableta + (o resoluciones más grandes), que puede evitar el uso de etiquetas pirateadas, utilizando en su lugar el margin-bottom , así:
Nota 3: Esto utiliza Bootstrap 3. Bootstrap 4 usa un conjunto de cuadrícula diferente y no funcionará con estos ejemplos.
No puede cambiar el orden de las columnas en pantallas más pequeñas, pero puede hacerlo en pantallas grandes.
Así que cambia el orden de tus columnas.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
Por defecto, esto muestra el contenido principal primero.
Así que en el móvil se muestra primero el contenido principal.
Mediante el uso de col-lg-push y col-lg-pull podemos reordenar las columnas en pantallas grandes y mostrar la barra lateral a la izquierda y el contenido principal a la derecha.
Trabajando el violín aquí .
Actualizado 2018
Para la pregunta original basada en Bootstrap 3 , la solución fue usar push-pull para los anchos más grandes, y luego las columnas mostrarán su orden natural en anchos más pequeños (xs). (AB revertir a BA).
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
main
</div>
<div class="col-md-3 col-md-pull-9">
sidebar
</div>
</div>
</div>
Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel
@emre declaró: " No puede cambiar el orden de las columnas en pantallas más pequeñas, pero puede hacerlo en pantallas grandes ".
Sin embargo, esto debe aclararse para indicar: "No puede cambiar el orden de las columnas" apiladas "de ancho completo en Bootstrap 3.
Sin embargo, en Bootstrap 4 ahora es posible cambiar el orden, incluso cuando las columnas están apiladas verticalmente de ancho completo , gracias a Flexstrap 4 flexbox. OFC, el método de extracción automática aún funcionará, pero ahora hay otras formas de cambiar el orden de las columnas en Bootstrap 4, lo que hace posible reordenar las columnas de ancho completo.
Método 1: use flex-column-reverse para las pantallas xs :
<div class="row flex-column-reverse flex-md-row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9">
main
</div>
</div>
Método 2: use flex-first para las pantallas xs (o order-* en 4.0.0) :
<div class="row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9 flex-first flex-md-unordered">
main
</div>
</div>
Bootstrap 4 (alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.0.0: https://www.codeply.com/go/e0v77yGtcr
Octubre 2017
Me gustaría añadir otra solución Bootstrap 4. Una que funcionó para mí.
La propiedad "Orden" de CSS, combinada con una consulta de medios, puede usarse para reordenar columnas cuando se apilan en pantallas más pequeñas.
Algo como esto:
@media only screen and (max-width: 768px) {
#first {
order: 2;
}
#second {
order: 4;
}
#third {
order: 1;
}
#fourth {
order: 3;
}
}
CodePen Link: https://codepen.io/preston206/pen/EwrXqm
Ajusta el tamaño de la pantalla y verás que las columnas se apilan en un orden diferente.
Ataré esto con la pregunta del cartel original. Con CSS, la barra de navegación, la barra lateral y el contenido se pueden orientar y luego se pueden aplicar las propiedades de pedido dentro de una consulta de medios.