Pedido de cambio de Flexbox con columna

First images presenta grid en PC: enter image description here Las segundas imágenes presentan cuadrícula en dispositivos móviles:

enter image description here

Como puede ver, necesito cambiar el orden y la cuadrícula. Intento utilizar flexbox, pero necesito agrupar B & C en PC y obtener A igual altura.

Condiciones importantes:

  • En PC Una altura es igual a sum B y C
  • En el móvil recibo el pedido: B, A, C

Sé que puedo usar Duble simple veces bloque B y uso mostrar / ocultar, pero esto no es aceptable en mi proyecto.

Si entiendo tus requisitos correctamente, esta sería la respuesta.

Para que sea más fácil de ver, he realizado el cambio con un estado de desplazamiento en lugar de una consulta de medios.

El truco es sacar el diseño A de flex en la versión para PC

.container { border: solid 1px black; margin: 10px; display: flex; flex-direction: column; position: relative; width: 400px; } .container > div { width: 200px; font-size: 50px; } .a { background-color: tomato; eight: 100%; osition: absolute; } .b { background-color: lightgreen; height: 140px; } .c { background-color: lightblue; height: 200px; order: 3; } .container div { width: 50%; } .container .a { position: absolute; left: 0px; top: 0px; width: 50%; height: 100%; } .container div { align-self: flex-end; } .container:hover .a { position: static; height: 130px; order: 2; } .container:hover div { width: 100%; } 
 
A
B
C

Aquí hay una demostración si sabes cuál es la altura de la wrapper externa; por ejemplo, es la altura de la ventana gráfica en el siguiente ejemplo:

 body { margin: 0; } * { box-sizing: border-box; } .wrapper { display: flex; flex-wrap: wrap; height: 100vh; } .wrapper > div { border: 1px solid; width: 50%; height: 50%; } .wrapper > div:first-child { height: 100%; } .wrapper > div:last-child { margin-left: auto; position: relative; top: -50%; } @media only screen and (max-width: 650px) { .wrapper { display: flex; flex-direction: column; flex-wrap: initial; } .wrapper > div { width: 100%; } .wrapper > div:first-child { order: 2; } .wrapper > div:last-child { order: 3; top: 0; } } 
 
A
B
C