Three Column Layout Stacking Issue in Mobile

Question

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

I would like to share the code but it uses a custom css and javascript and will make it confusing. — scura s, Aug 22 '22 at 06:24

score 1 · Answer 1 · answered Aug 22 '22 at 07:00

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>

Thanks. I updated my question to reflect your comment. – scura s Aug 22 '22 at 07:06 — scura s, Aug 22 '22 at 07:06

scura s · Accepted Answer · 2022-08-22T13:15:30.480

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>

Three Column Layout Stacking Issue in Mobile

2 Answers2