[Resolved] Alternating grid – how to change order in mobile view

[mkjj]

I have a tricky problem that I can’t figure out myself. This is not really a GP-related support question. I do understand if this is beyond the scope of the forum.

I have a standard 2-column layout with 2 rows. The text in the first row is on the left side, and in the second row it’s on the right side. This is the site.

HTML and CSS are pretty standard (only the first grid is shown):

<div class="grid">
<div class="promo-text">
<h3>Heading</h3>
<p>Text</p>
</div>
<div class="promo-img">Image</div>
<div class="promo-img">Image</div>
<div class="promo-text">
<h3>Heading</h3>
Text
</div>
</div>
</div>

.grid {
display: block;
}
@media (min-width: 768px) {
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}

That works just fine, but in responsive view it shows the second title after the image due to the HTML structure. It would be much better to have a more semantic structure like this:

<div class="grid">
<div class="promo-text">
<h3>Heading</h3>
<p>Text</p>
</div>
<div class="promo-img">Image</div>
<div class="promo-text">
<h3>Heading</h3>
Text
</div>
<div class="promo-img">Image</div>
</div>
</div>

But this does not show text and image in an alternating order. Here is a test page.

To cut a long story short. I would like to have the HTML of page 2 and the desktop layout of page 1. Could you point me in the right direction?

Thank you very much in advance.

Mike

[Ying]

Hi Mike,

Based on your design, it will be much easier to use display: flex; instead of display: grid;

Then you will be able to use the order property to re-order the elements on mobile.

[mkjj]

Hi Ying,

thank you very much. Good idea! I tried this, and it seems to work very well. Would you consider this acceptable CSS?

  .grid-alt {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
  }
  .grid-alt :nth-child(3) {
    order: 4;
  }

This moves the third second text block (third item) to the end.

[Ying]

You would want the grid to wrap. So I would go like this:

.grid-alt {
    display: flex;
    flex-wrap: wrap;
    row-gap: 40px;
    column-gap: 40px;
}

.grid-alt > * {
    width: calc(50% - 40px);
}
@media (max-width:767px) {
    .grid-alt >* {
        width:100%;
    }
    .grid-alt >*:nth-child(3) {
        order: 4;
    }
}

[mkjj]

Worked great. Thank you very much. I had to add display:block for mobile view:

@media (max-width: 767px) {
  .grid-alt > * {
    width: 100%;
  }
  .grid-alt {
    display: block;
  }
}

Now, it’s exactly how I wanted it to be.

Thanks again for the great support!

[Ying]

No Problem, glad to help 🙂

[Author]

Posts