Archived topic

Alternating grid - how to change order in mobile view

5 replies · Started by mkjj on January 24, 2023

Viewing posts 1–6 of 6

January 24, 2023 at 10:51 am #2507615

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

January 24, 2023 at 10:59 am #2507623

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.

January 24, 2023 at 11:14 am #2507653

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.

January 24, 2023 at 11:22 am #2507672

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

January 26, 2023 at 2:13 am #2509518

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!

January 26, 2023 at 10:37 am #2510159

No Problem, glad to help :)

This archived topic is closed to new replies.

Start building better websites today.