Mover la columna más izquierda en un diseño receptivo
https://stackoverflow.com/questions/8844521
-
27-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy trabajando en hacer un rediseño del sitio web de mi periódico universitario y conseguí que el diseño se ajuste bien a un iPad. Ahora estoy tratando de cambiarlo a un diseño de una columna (para teléfonos inteligentes).
El problema es que, en un diseño de una sola columna, la columna derecha debe ir por encima de la columna izquierda. Sabería cómo hacer esto si el código para la columna derecha se escribió antes de la columna izquierda, pero desafortunadamente no lo es.
¿Cómo puedo mover la columna izquierda debajo de la columna derecha? ¿Necesito usar JavaScript para cambiar los pedidos de columna en el código HTML? ¡Gracias!
EDITAR: Me doy cuenta de que puedo tener un DIV que sea invisible cuando el ancho> Sumenumber. Sin embargo, prefiero no tener que ser redundante ...
Solución
La solución de solo CSS es comenzar con la pantalla más pequeña a medida que su diseño predeterminado luego mejora a medida que el tamaño de la pantalla aumenta con consultas de medios. Comenzando con la pantalla más pequeña primero coloca su marcado en el orden correcto: para el banner de la imagen anterior, la navegación primaria, el contenido principal (columna de la derecha), aparte (columna izquierda) y (presumiblemente), pie de página. Como las consultas de los medios aplican CSS adicionales, puede flotar el contenido principal a la derecha y a la izquierda: los elementos se colocan correctamente para pantallas más pequeñas o más grandes.
Otros consejos
La forma más fácil de pensar en hacer esto es con jQuery (una biblioteca de JavaScript) para eliminar el contenido de la columna correcta de un DIV a otro en el DOM. Esto le permite crear y eliminar los DIV sobre la marcha para que no haya redundancia al final.
Si esto es demasiado vago, comenta y agregaré un ejemplo.
CSS puede sacar elementos del flujo del documento y ponerlos en cualquier lugar, de cualquier manera que desee. Pero no puede crear un nuevo flujo de documentos (es decir, no puede reordenar elementos). Debe colocar un elemento en relación con el otro o colocarlos a ambos absolutamente.
Si tiene acceso a JavaScript y no está preocupado por la degredación elegante, también podría intercambiar el .innerhtml de los dos divs.
