Estoy atascado con un diseño CSS de dos columnas aparentemente simple. Por lo general, este diseño es simple, pero estoy construyendo un sitio receptivo y necesito que las columnas se colapsen en el orden correcto para dispositivos móviles, uno encima del otro.

En el escritorio, necesito que la columna de la derecha tenga un tamaño fijo, por ejemplo, 200 píxeles y el resto del área que ocupará la columna de la izquierda. Naturalmente, necesito las columnas para borrar y empujar el contenido hacia abajo.

En el móvil, simplemente se apilarían. Así que la columna de la izquierda está por encima de la columna de la derecha.

Como se mencionó anteriormente, este tipo de diseño generalmente se logra simplemente flotando una de las columnas y / o estableciendo grandes márgenes, pero este enfoque requiere que la izquierda y la derecha se intercambien en el flujo del documento y haría imposible la versión móvil colapsada.

Incluso he analizado la tabla de visualización y la tabla-celda, esto funciona relativamente bien en su mayor parte, pero desafortunadamente FireFox no admite elementos posicionados absolutos dentro del diseño que rompen parte del contenido.

Soy un desarrollador experimentado, aunque esto sería más simple de lo que debería encontrar.