当我经常访问公司的网站时，我看到一个常见的模式，图像在左侧，描述在右侧，当我向下滚动时，第二列是相反的，图像在右侧，文本在左侧，依此类推。
我试着用FlexBox创建一些simimlar：
null
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
h2 {
color: #5c3b65;
font-size: 2.1rem;
}
.about-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.about-container > * {
width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
border: 1px solid green;
margin: 20px 0 50px;
}
@media (min-width: 52em) {
[class*="col-"] {
border: 1px solid orange;
}
.col-1 {
flex: 25%;
}
.col-2 {
flex: 50%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="images-oddeven.css">
<title>Odd and Even</title>
</head>
<body>
<section class="about">
<div class="about-container">
<div class="row">
<div class="col-1">
<img src="https://picsum.photos/400" alt="">
</div>
<div class="col-2">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-1">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="col-2">
<img src="https://picsum.photos/400" alt="">
</div>
</div>
<div class="row">
<div class="col-1">
<img src="https://picsum.photos/400" alt="">
</div>
<div class="col-2">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
</div>
</section>
</body>
</html>null
然而，我确信我的代码不能正常工作，因为我想要25%的图像宽度，但图像的位置改变了。所以，有时我需要在左侧，有时在右侧，有25%的列宽。
你认为用CSS网格来处理这件事会更容易吗？浏览器兼容性对我来说不是一个问题。我不需要IE11的支持。
对所有行保持相同的html，在偶数行中更改col-1的顺序。
.row:nth-child(2n) .col-1 {
order: 2;
}
null
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
h2 {
color: #5c3b65;
font-size: 2.1rem;
}
.about-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.about-container>* {
width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
border: 1px solid green;
margin: 20px 0 50px;
}
@media (min-width: 52em) {
[class*="col-"] {
border: 1px solid orange;
}
.col-1 {
flex: 25%;
}
.col-2 {
flex: 50%;
}
.row:nth-child(2n) .col-1 {
order: 2;
}
}<section class="about">
<div class="about-container">
<div class="row">
<div class="col-1">
<img src="https://picsum.photos/400" alt="">
</div>
<div class="col-2">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-1">
<img src="https://picsum.photos/400" alt="">
</div>
<div class="col-2">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-1">
<img src="https://picsum.photos/400" alt="">
</div>
<div class="col-2">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
</div>
</section>