替换CSS网格列和移动视图

Question

我正在使用CSS Grid为我的网站构建服务列表。该网站整体网格中的一行被分为两列CSS网格列。

在第一行的第一列中，有服务的描述。在第二列中，有一个表示服务的图像。

[每一行中，描述和图像交替出现，因此在第二行第一列中有图像，在第二列中有描述。请查看附件中的图片，以查看到目前为止我的工作（注意：我调整了图片大小，以便更轻松地截屏）。

CSS网格的移动版本为一列。当我在移动版本中显示相同的内容时，布局不再起作用。由于我的布局由HTML内容决定（我知道这可能是一件坏事），因此标题不一定总是显示在图像上方，这正是我想要的。请参阅附件以查看问题。

I believe解决此问题的答案在于使用flex-direction: row-reverse;，但是，很难找到一些好的示例（也许我只是在寻找错误的方式）。我可以找到的最好的Codepen可以使用flex-direction来实现我想要的功能，但是它不能很好地将描述放在一个CSS Grid框中，而将图像放在另一个CSS Grid框中，因此，在调整浏览器大小时，图像会与文本重叠。这可能是由于我缺乏使用Flexbox的知识（仍在学习中）。

您能帮我弄清楚如何正确创建交替的两列项目列表，当它们位于一列列表中时也能正确显示文本和图像吗？

我希望留在CSS Grid / Flexbox / no script世界中，但我很乐意接受其他想法。

非常感谢您可以提供的任何帮助！

HTML

<!-- Services area -->
<div class="services-area">
    <div class="services-text">
        <h3>This is service 1</h3>
    </div>
    <div class="services-div">
        <img class="services-image" src="images/home/home-agile-transformation.png" alt="Agile transformation image.">
    </div>
    <div class="services-div">
        <img class="services-image" src="images/home/home-agile-coaching.png" alt="Agile transformation image.">
    </div>
    <div class="services-text">
        <h3>This is service 2</h3>
    </div>
    <div class="services-text">
        <h3>This is service 3</h3>
    </div>
    <div class="services-div">
        <img class="services-image" src="images/home/home-agile-sw-implementation.png" alt="Agile transformation image.">
    </div>
</div>

CSS

// layout for services

// display a stacked grid <767 pixels
.services-area {
    grid-area: svcs;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    @if $debug { background-color: $debugServicesArea; }
} 

// display a 2-column grid >768
@include for-size(full-size) {
    .services-area {
    grid-area: svcs;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    margin-left: $gridMarginLeft;
    margin-right: $gridMarginRight;

    @if $debug { background-color: $debugServicesArea; }
    }
}

.services-text {
    display: grid;
    align-items: center;
    justify-content: center;
}

.services-image {
    max-width: 100%;
    height: auto;
}

Answer 1

出于可访问性和更好的SEO，请按逻辑顺序（标题，图像）保持标记。

在移动设备上，您根本不需要网格，请使用display:block作为容器。使用grid-auto-flow: row dense按照行顺序尽可能密集地填充网格。这样可以确保没有网格单元为空。然后通过指定标题元素从其开始来替换标题元素。您可以使用:nth-child()兄弟姐妹选择器来选择标题，从第3个开始，然后是每4个（4n - 1表示4 * 0 - 1 = -1（无效的兄弟姐妹，跳过）； 4 * 1 - 1 = 3; 4 * 2 - 1 = 7; ...）。

/* display a stacked grid <767 pixels */
.services-area {
    display: block;
} 

/* display a 2-column grid >768 */
@media (min-width: 768px) {
  .services-area {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      justify-content: center;
      grid-auto-flow: row dense;
  }
}

.services-area > :nth-child(4n - 1) {
  grid-column-start: 2;

}

.services-image {
    max-width: 100%;
    height: auto;
}