html - misma - igualar altura de divs

Fila de Flexbox con dos columnas, reordenada para pantallas angostas

Question

Intento crear un diseño receptivo utilizando flexbox donde se deben apilar un par de elementos (dos y cuatro), al lado de la sección tres cuando se está en una pantalla grande, pero luego en pantallas angostas, el orden debe cambiar para que estén apilados, uno, dos, tres, cuatro.

Tengo una solución, pero no está SECA, como pueden ver en el fragmento, he duplicado la sección cuatro.

¿Es posible lograr esto usando flexbox sin la duplicación?

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid red;
}
.section {
  border: 1px solid green;
  flex-grow: 1;
}
.one, .two, .four {
  width: 100%;
}
.sub-container {
  display: inline-flex;
  flex-direction: column;
  width: 50%;
}
.mobile-only {
  display: none;
}
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .sub-container {
    width: 100%;
  }
  .section {
    width: 100%;
  }
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}

<div class="container">
  <div class="section one">One</div>
  <div class="sub-container">
    <div class="section two">Two</div>
    <div class="section four desktop-only">Four</div>
  </div>
  <div class="section three">Three</div>
  <div class="section four mobile-only">Four</div>
</div>

Answer 1

Flexbox no está diseñado para construir cuadrículas bidimensionales (donde las columnas y las filas pueden cruzarse). Entonces, para que su diseño funcione con las propiedades flex, tendrá que abrirse camino hacia allí.

Aquí hay una explicación más completa del problema:

• ¿Es posible que los artículos flexibles se alineen estrechamente con los artículos que están sobre ellos?

Sin embargo, su diseño es simple y fácil con CSS Grid.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 5px;
  grid-template-areas: " one one "
                       " two three "
                       " four three ";
}

.one   { grid-area: one; }
.two   { grid-area: two; }
.three { grid-area: three; }
.four  { grid-area: four; }

@media ( max-width: 600px ) {
  .container {
       grid-template-columns: 1fr;
       grid-template-areas: " one "
                            " two "
                            " three"
                            " four ";
       }
}

/* non-essential; just for demo */
.section {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="section one">One</div>
  <div class="section two">Two</div>
  <div class="section three">Three</div>
  <div class="section four">Four</div>
</div>

https://jsfiddle.net/9fyprm3u/

La especificación Grid proporciona múltiples métodos para diseñar grillas. En este caso, he usado la propiedad grid-template-areas , que le permite diseñar elementos de cuadrícula usando arte ASCII.

soporte de navegador