Ayuda en la programación, respuestas a preguntas / Css / Problemas de diseño de Flexbox: elemento de flexbox que abarca varias filas - css, móvil, diseño, diseño responsivo, flexbox

Problemas de diseño de Flexbox: elemento de Flexbox que abarca varias filas: css, dispositivo móvil, diseño, diseño receptivo, flexbox

Recientemente publiqué una pregunta similar sin embargoNo obtuve una respuesta que estaba buscando. Tal vez es porque no es posible. Pensé que volvería a preguntar con más detalle. Actualmente tengo este diseño, usando flexbox, con el que estoy contento.

Diseño móvil

Pero quiero que el iPad tenga este diseño.

enter image description here

Usando este html

<body>
<header>Header</header>
<p>image</p>
<div class="main_content">Main Content</div>
<div class="gallery_filter">Filter</div>
<aside class="gallery_upload">Upload</aside>
<div class="g_ads">Box</div>
<footer>Footer</footer>
</body>

Sin cambiar Cualquier HTML, es posible recrear ese diseño usando flexbox. http://jsfiddle.net/V4GMK/

el violín no es bonito, pero espero que se te ocurra la idea. Parece que no puedo obtener el diseño que estoy buscando.

Gracias por cualquier ayuda.

Respuestas

1 para la respuesta № 1

SIN cambiando el HTML, creo que esta puede ser la dirección a la que quieres ir.

Aquí hay una jsFiddle actualizado,

y aquí está el código en caso de que enlace cada ruptura:

<body>
<header>Header</header>
<p>image</p>
<div class="main_content">Main Content</div>
<div class="gallery_filter">Filter</div>
<aside class="gallery_upload">Upload</aside>
<div class="g_ads">Box</div>
<footer>Footer</footer>
</body>

* {
margin:0;
padding:0;
}

body {
display: flex;
flex-flow: row wrap;
height:100%;
}
body > * {
padding: 10px;
margin-right:10%;
flex: 1 90%;
}
header {
background: #ED1B24;
height:35px;
}
footer {
background: #7F7F7F;
}

.main_content {
text-align: left;
background: #A349A3;
min-height:200px;
}

.gallery_filter {
background: #FEAEC9;
}
p {
background: #FF7F26;
height:50px;
}
.gallery_upload {
background: #00A3E8;
}
.g_ads {
padding: 0;
margin: 0;
flex: 4 10%;
background: #7092BF;
height:100%;
width: 10%;
position: absolute;
right: 0;
}
.gallery_filter, .gallery_upload { flex: 0 2 44%; margin:0; }

.main_content   { flex: 3 90%; }
header          { order: 2; }
p               { order: 3; }
.gallery_filter { order: 4; }
.gallery_upload { order: 5; }
.main_content   { order: 6; }
footer          { order: 7; }
.g_ads          { order: 1; }

Como puedes ver, no cambié tu HTML en absoluto.