我有一个两列网格，如下所示：一些文本，后面是与该文本相关的图像。在另一行，订单被翻转：
| 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/…(？
最好创建子框并使用flex direction:columnreverse。在这里查看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>
您可以使用order和适当的媒体查询来实现：
@media screen and (max-width: 425px) {
.pure-g > article:nth-child(2) {
order: -1;
}
}
请查看此处更新的jsFiddle或下面的片段。
.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>