Come riordinare i div usando la flex box?

Sto cercando di mantenere una struttura semantica amichevole e semantica per il mio DOM, senza ripetere interi elementi per visualizzarli in varie posizioni.

Il mio layout è basato sulla display: flex elementi display: flex . Cerco di raggiungere il seguente:

Anteprima del layout mobile e desktop

Cose importanti da sapere:

  • Non voglio mostrare / hide i div in base alla larghezza della finestra (per evitare duplicati non necessari)
  • Nessuno dei div ha un’altezza nota o fissa
  • Sui desktop i div dovrebbero essere centrati verticalmente, mentre la colonna destra crea un tag-team (si comporta come un singolo div)
  • Il layout deve supportare almeno IE11 +

C’è una soluzione solo per ottenere questo?

In caso contrario, sarebbe facile ritagliare il div verde e incollarne il contenuto in quello rosa usando javascript. Ma ho delle preoccupazioni riguardo alle prestazioni e allo “sfarfallio” che usano questo, anche se il ridimensionamento del browser lo rende più complicato. Lo faccio inutilmente complicato?

Qui c’è fiddle che mostra una soluzione funzionante ma con javascript :

DEMO CODICE

In generale, non è ansible farlo solo con Flexbox, anche se potrebbe esserci un compromesso basato su ciascun caso specifico.

Con Flexbox da solo, usando l’altezza fissa, puoi farlo

 * { box-sizing: border-box; } body, html { margin: 0; } .flex { width: 90%; margin: 5vh auto; height: 90vh; background: rgba(0, 0, 0, 0.05); display: flex; flex-flow: column wrap; } .flex div { flex: 1; width: 50%; } .flex div:nth-child(2) { order: -1; } .flex::before { content: ''; height: 100%; } @media (max-width:768px) { .flex div { width: auto; } .flex::before { display: none; } .flex div:nth-child(2) { order: 0; } } /* styling */ .flex-child { color: white; font-size: 2em; font-weight: bold; } .flex-child:nth-child(1) { background: #e6007e; } .flex-child:nth-child(2) { background: #f4997c; } .flex-child:nth-child(3) { background: #86c06b; } 
 
Top/Right
Center/Left
Bottom/Right