如何制作交替响应网格？

Question

我有一个 2 列网格，如下所示：一些文本，然后是与该文本相关的图像。在另一行中，顺序被翻转：

| Text 1           | Image for Text 1 |
| Image for Text 2 | Text 2           |
| Text 3           | Image for Text 3 |

我创建了一个标准网格来实现它（jsfiddle：https://jsfiddle.net/6yxLpqmr/），摘自源代码：

<div class="pure-g">
  <article class="pure-u-1 pure-u-md-1-2">Text 1</article>
  <article class="pure-u-1 pure-u-md-1-2">Image for Text 1</article>
  <article class="pure-u-1 pure-u-md-1-2">Image for Text 2</article>
  <article class="pure-u-1 pure-u-md-1-2">Text 2</article>
  <article class="pure-u-1 pure-u-md-1-2">Text 3</article>
  <article class="pure-u-1 pure-u-md-1-2">Image for Text 3</article>
  <!-- many more alternating articles like this -->
</div>

但是，一旦网格在窄屏幕上折叠，就会导致：

Text 1
Image for Text 1
Image for Text 2
Text 2
Text 3
Image for Text 3
<...>

这是不直观的。

Q1: 如何将结果更改为：

Image for Text 1
Text 1
Image for Text 2
Text 2
Image for Text 3
Text 3

Q2: 是否有可能以一种自行创建交替的方式编写 CSS（当然不生成 CSS），而在语义上保持 HTML“有序”(image/text/image/text/...)?

Answer 1

您可以使用 order 以及适当的媒体查询来实现：

@media screen and (max-width: 425px) {
  .pure-g > article:nth-child(2) {
    order: -1;
  }
}

查看更新后的 jsFiddle here 或下面的代码片段。

.pure-g > article:nth-child(2) {
  order: -1;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" />
    <style>article { min-height: 100px; min-width: 200px; }</style>
  </head>
  <body>
    <div class="pure-g">
      <article class="pure-u-1 pure-u-md-1-2">Text 1</article>
      <article class="pure-u-1 pure-u-md-1-2">Image for Text 1</article>
      <article class="pure-u-1 pure-u-md-1-2">Image for Text 2</article>
      <article class="pure-u-1 pure-u-md-1-2">Text 2</article>
    </div>
  </body>
</html>

Answer 2

最好创建子框并使用flex-direction: column-reverse。在此处查看 jsFiddle。

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" />
    <style>
        article {
            min-height: 100px;
            min-width: 200px;
        }
        .box {
            display: flex;
            flex-direction: column;
        }
        @media screen and (max-width: 600px) {
             .box:first-child {
                flex-direction: column-reverse;
             }
        }
    </style>
</head>

<body>

    <div class="pure-g">
        <div class="box">
            <article class="pure-u-1 pure-u-md-1-2">Text 1</article>
            <article class="pure-u-1 pure-u-md-1-2">Image for Text 1</article>
        </div>
        <div class="box">
            <article class="pure-u-1 pure-u-md-1-2">Image for Text 2</article>
            <article class="pure-u-1 pure-u-md-1-2">Text 2</article>
        </div>
    </div>
</body>
</html>

如何制作交替响应网格？

How to make an alternating responsive grid?

html

css

pure-css