Tengo problemas con el diseño de flexbox en un dispositivo móvil. El escritorio se ve bien en la vista móvil. Quiero mostrarlo como se muestra a continuación.
.div1 { box-sizing:border-box; border:0.5px solid red; } .main-container { height:100%; display:flex; } .left-container { flex:1 1 0; } .right-container { flex:1 1 0; display:flex; //flex-direction:column; } .half-containers { flex:1; overflow:auto; order: 1; } .half-containers-activity { flex:1; overflow:auto; order: 0; } @include media-breakpoint-down(sm) { .main-container { flex-direction: row; } } <div class="div1"> <div class="main-container"> <div class="left-container"> <div class="half-containers"> Overview </div> <div class="half-containers-activity"> Activity </div> </div> <div class="right-container"> Payment </div> </div> </div>Puede utilizar el siguiente método. Lo principal aquí es usar display: contents; en .left-container para "neutralizarlo", de modo que los tres elementos se puedan usar "en un nivel" como elementos secundarios flexibles, aplicándoles los parámetros de order correspondientes. Todo eso en una consulta de medios, por supuesto, para dejar inalterada la versión de escritorio.
.div1 { box-sizing: border-box; border: 0.5px solid red; } .main-container { height: 100%; display: flex; } .left-container { flex: 1 1 0; } .right-container { flex: 1 1 0; display: flex; //flex-direction:column; } .half-containers { flex: 1; overflow: auto; order: 1; } .half-containers-activity { flex: 1; overflow: auto; order: 0; } @media screen and (max-width: 700px) { .main-container { flex-direction: column; } .left-container { display: contents; } .half-containers { order: 0; } .right-container { order: 1; } .half-containers-activity { order: 2; } } <div class="div1"> <div class="main-container"> <div class="left-container"> <div class="half-containers"> Overview </div> <div class="half-containers-activity"> Activity </div> </div> <div class="right-container"> Payment </div> </div> </div> Debería agregar esa display: contents; todavía se considera un "valor experimental", pero el soporte del navegador ya es bastante bueno: https://caniuse.com/?search=display%3A%20contents