0
133
ViewsProblema de apilamiento de diseño de tres columnas en dispositivos móviles
Tengo un diseño de tres columnas para contenedores que funciona bien en la vista de escritorio y tableta, pero se rompe incorrectamente en la vista móvil.
El diseño en el móvil debería apilarse así
La forma en que se acumula ahora es: 1,4,7,2,5,8,3,6,9.
¿Hay alguna manera de hacer esto sin introducir la biblioteca de mampostería?
Podría hacerlo en Javascript agregando un oyente para cambiar el tamaño y recargar los contenedores en un orden diferente, pero creo que no es óptimo.
Las columnas tienen actualmente el siguiente código:
<div data-component-hook-blog-function="blogColumn" data-sly-list.blog="${blogList}" class="l-grid__cell l-grid__cell--1/3 l-grid__cell--1/1@phone"> .l-grid__cell--1\/3 { width: calc(3.3333333333 * calc(10% - var(--rounding-compensation)) - var(--size-gutter-x)); -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .l-grid__cell { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; margin-left: var(--size-gutter-x); margin-bottom: var(--size-gutter-y); -webkit-box-sizing: border-box; box-sizing: border-box; }2 answers
Answer question0
El código que publicaste no es bootstrap. En bootstrap, logra su resultado usando filas + columnas:
<div class="row"> <div class="col-12 col-md-4"> 1 </div> <div class="col-12 col-md-4"> 2 </div> <div class="col-12 col-4-md"> 3 </div> <div class="col-12 col-md-4"> 4 </div> <div class="col-12 col-md-4"> 5 </div> <div class="col-12 col-md-4"> 6 </div> <div class="col-12 col-md-4"> 7 </div> <div class="col-12 col-md-4"> 8 </div> <div class="col-12 col-md-4"> 9 </div> </div>0
Pude resolver esta pregunta con algo de ayuda desde aquí al crear un nuevo div con solo una columna que se muestra solo debajo del punto de interrupción definido en el CSS. Cuando la vista no es móvil, se muestran las tres columnas existentes.
Esta solución requiere duplicar el código en html, pero aún usar css para activar/desactivar partes del DOM.
CSS
// controls which blog article column in shown in mobile view @media screen and (max-width: 480px) { .show-on-desktop { display: none; } } // controls which blog article columns are shown in desktop view @media screen and (min-width: 481px) { .hide-on-desktop { display: none; } }HTML
<div class="existingclassses show-on-desktop hide-on-mobile"> <div class="existingclassses"> <sly data-sly-call="${blogColumn @ blogList=model.blogItemsColumn1, iconTpl=iconTpl, breakpoints=model.breakpoints}"></sly> <sly data-sly-call="${blogColumn @ blogList=model.blogItemsColumn2, iconTpl=iconTpl, breakpoints=model.breakpoints}"></sly> <sly data-sly-call="${blogColumn @ blogList=model.blogItemsColumn3, iconTpl=iconTpl, breakpoints=model.breakpoints}"></sly> </div> </div> <div class="existingclassses hide-on-desktop" data-mobile-view> <div class="existingclassses"> <sly data-sly-call="${blogColumn @ blogList=model.allBlogItems, iconTpl=iconTpl, breakpoints=model.breakpoints}"></sly> </div> </div>