posicion - order div css
Cambiar el orden Div en el diseño receptivo (9)
Estoy creando un sitio web de diseño receptivo.
Básicamente, cuando el puerto de visualización es inferior a X, quiero mostrar el menú al pie de la página.
EJEMPLO LINK DEAD - SITIO NO MÁS PROPICIO DE MÍ
SI cambia el tamaño de la ventana de su navegador, notará 3 diseños diferentes (basados en el diseño del objetivo final en lugar de los tipos de dispositivos)
V1: mayor que 999px, verá el recuadro rojo arriba a la izquierda, el recuadro azul junto al recuadro rojo.
V2: entre 600px y 999px, notará que el recuadro rojo se vuelve más pequeño, el recuadro azul ahora se encuentra debajo del recuadro rojo
v3: menos de 600px, notará que el cuadro rojo se vuelve más pequeño, el cuadro azul ahora amarillo.
Básicamente, en V3, quiero hacer ahora el cuadro amarillo, sentarse debajo del cuadro verde, encima del cuadro gris
por lo que el orden se va Red Box Green Box Yellow box Gray Box
Aparte de la desagradable div vieja, muestra nueva div hack (técnica) o versión JS (se va de CSS Responsive) ¿Hay alguna manera de mover esto.
CSS está dentro del archivo, por lo que ver fuente muestra todo.
Aclamaciones
Honestamente, no puedo pensar en una forma de hacerlo en CSS solo, pero es fácilmente factible en jQuery sin romper su diseño receptivo. Su CSS no necesita cambiar, excepto para eliminar el margen superior de la div # top-links.
<script type="text/javascript">
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width()<600)
{
$("#topLinks").remove().insertAfter($("#content"));
} else {
$("#topLinks").remove().insertBefore($("#content"));
}
}
</script>
Prueba esto Quizás útil
@media (min-width:1px) and (max-width:599px) {
#pageFrame {
width:100%;
}
#logo {
margin:0 auto;
width:50px;
height:50px;
}
#topLinks {
position:absolute;
top:250px;
float:right;
width:100%;
background-color:yellow;
}
#content {
position:absolute;
top:100px;
clear:none;
float:left;
width:100%;
}
#footer {
position:absolute;
top:350px;
clear:both;
width:100%;
}
Intente crear dos divs uno en el pie de página y uno en el encabezado, "display: none" el de abajo cuando la pantalla es menor que X show it.
Sí, es muy simple cambiar el orden de los divs en un contenedor. Por favor, eche un vistazo a mi código CSS de trabajo.
<html>
<head>
<style type="text/css">
#nav_bar{
width:100%;
height:50px;
background:red;
}
#container{
width:100%;
height:500px;
}
#left_panel {
position:relative;
float:left;
width:250px;
border:0px solid black;
background:#ccc;
height:100%;
}
#right_panel{
width:100%;
background:#666;
height:100%;
}
#inner_container{
height:100%;
}
.center {
margin-left: auto;
margin-right: auto;
width: 40%;
padding-top:50px;
}
.data_container{
border:1px solid black;
float:left;
position:relative;
padding:10px;
}
#footer{
width:100%;
height:50px;
background:blue;
}
@media all and (max-width: 700px) {
#container {
width: 100%;
height: 500px;
display: flex;
flex-flow: column-reverse ;
}
#left_panel {
width:100%;
height:200px;
}
#right_panel{
width:100%;
height:300px;
}
}
</style>
</head>
<body>
<div id="nav_bar">Nav</div>
<div id="container">
<div id="left_panel">
<div class="center">
Left Panel content
</div>
</div>
<div id="right_panel">
<div id="inner_container" class="center">
<div class="data_container">
Action Item 1
</div>
<div class="data_container">
Action Item 2
</div>
<div class="data_container">
Action Item 3
</div>
</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
Acabo de implementar una solución de
http://www.jtudsbury.com/thoughts/rearrange-div-order.php
que usa display: table-header-group; y display: table-footer-group;
Aquí está mi ejemplo para dos cajas horizontales de 50% de ancho que cambian a la casilla arriba a la izquierda en el ancho de la ventana de contracción:
.box-container {
display: table;
}
.box-50 {
width: 50%;
display: table-cell;
padding: 0 20px;
}
@media only screen and (max-width : 700px) {
.box-container {
display: block;
}
.box-50 {
display: block;
width: 100%;
}
/* http://www.jtudsbury.com/thoughts/rearrange-div-order.php */
.box-50.left {
display: table-footer-group;
}
.box-50.right {
display: table-header-group;
}
}
Flex-Box es la respuesta que estás buscando. Consulte (este enlace está ahora roto - http://www.jordanm.co.uk/lab/contentchoreography ) para obtener una explicación completa de todas las características de Flexbox https://css-tricks.com/snippets/css/a- guía-a-flexbox /
Deberías echarle un vistazo a la propiedad direction css. https://developer.mozilla.org/en-US/docs/Web/CSS/direction
Lo que puedes hacer es:
-
direction: rtl;en su contenedor primario:.container { direction: rtl; }.container { direction: rtl; } - restablecerlo a la normalidad en los niños directos:
.container > * { direction: ltr; }.container > * { direction: ltr; } - Cambia el orden de tus divs en tu HTML para mostrar las cosas en el orden correcto en la versión de escritorio
Y esto funciona en todos los navegadores porque esta propiedad es compatible en todas partes (desde IE 5.5 ...).
usando EventListener y matchMedia:
//on load
responsive_change_box_order();
//on resize
window.addEventListener(''resize'', responsive_change_box_order );
function responsive_change_box_order() {
if (window.matchMedia("(max-width: 1118px)").matches) {
jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
}
else{
jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
}
}
Si está utilizando Bootstrap 4, creé un complemento simple para verificar el punto de interrupción de la consulta de medios actual y luego establecerlo como una variable.
Entonces puedes hacer algo como
if ( xs == true ) {
$("#topLinks").remove().insertAfter($("#content"));
}
Puede obtenerlo aquí: https://jacoblett.github.io/IfBreakpoint/