Question

0

66

Views

Three Column Layout Stacking Issue in Mobile

I have a three-column layout for containers that works fine on Desktop and Tablet view but breaks incorrectly on Mobile view.

The layout on mobile should stack like this

The way it stacks now is: 1,4,7,2,5,8,3,6,9.

Is there a way to do this without introducing the masonry library?

I could do it in Javascript by adding a listener for resizing and reloading the containers in a different order but I believe it is not optimal.

The columns have currently the following code:

<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;
}

3 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-08-23T23:41:28.572Z

The code you posted is not bootstrap. In bootstrap you achieve your result by using rows + columns:

<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>

Answer 2 · 2022-08-23T23:41:28.579Z

I was able to solve this question with some help from here by creating a new div with only one column that is displayed only below the breakpoint defined in the CSS. When the view is not mobile, the existing three columns are displayed.

This solution requires duplicating code in html but still using css for turning on/off parts of the 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>