Html 如何重新创造这一点；左边是图像，右边是文本”；及；右边的文字左边的图像“左”；图案

当我经常访问公司的网站时，我看到了一种常见的模式，左边是图像，右边是描述，当我向下滚动时，第二列是相反的，图像在右边，文本在左边，依此类推

我尝试用flexbox创建类似的东西：

：根目录{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
身体{
保证金：0；
填充：0；
}
氢{
颜色：#5c3b65；
字号：2.1rem；
}
.关于集装箱{
最大宽度：1200px；
保证金：0自动；
显示器：flex；
柔性包装：包装；
}
.关于容器>*{
宽度：100%；
}
.行{
显示器：flex；
柔性包装：包装；
边框：1px纯绿色；
利润率：20px 0 50px；
}
@介质（最小宽度：52em）{
[类别*=“列-”]{
边框：1px实心橙色；
}
.col-1{
弹性：25%；
}
.col-2{
弹性：50%；
}
}

奇偶
标题
正文

标题
正文

标题
正文

为所有行保留相同的html，并更改偶数行中

col-1

的顺序

.row:nth-child(2n) .col-1 {
  order: 2;
}

：根目录{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
身体{
保证金：0；
填充：0；
}
氢{
颜色：#5c3b65；
字号：2.1rem；
}
.关于集装箱{
最大宽度：1200px；
保证金：0自动；
显示器：flex；
柔性包装：包装；
}
.关于容器>*{
宽度：100%；
}
.行{
显示器：flex；
柔性包装：包装；
边框：1px纯绿色；
利润率：20px 0 50px；
}
@介质（最小宽度：52em）{
[类别*=“列-”]{
边框：1px实心橙色；
}
.col-1{
弹性：25%；
}
.col-2{
弹性：50%；
}
.行：第n个子（2n）.列-1{
顺序：2；
}
}

标题
正文

标题
正文

标题
正文

我喜欢使用display:flex；如果您将两个div放在一个具有display flex的div中，并给它们50%的宽度，那么应该可以工作

此外，您还可以在flex中执行订单。 这是一篇有用的文章

---

我目前没有一个片段可以展示，但这篇文章包含了一些实现您所需的方法。

这可能是一个不受欢迎的观点，但如果您可以在grid和flexbox之间进行选择，grid几乎总是一个更好的解决方案。是的，我考虑过这一点。微软将在今年11月放弃对IE11的支持，所以我认为网格现在已经可以生产了，我只是没有考虑如何解决我的问题。正如你们所看到的，有人回复了我的帖子，并建议，

order:2

这个东西，并想知道grid是否有类似的东西。@DBS，其实不需要选择；它们是为了协同工作而设计的。行div在CSS网格中不是必需的吗？我将为此创建一个演示。谢谢。请随意删除任何不必要的标记。如果不使用行包装器，我无法提供解决方案。我认为这是合适的。对于flexbox示例，这似乎也适用：

.row:nth child（2）{flex flow:row reverse；}

而不是针对

.row:nth child（2n）.col-1

并使用

顺序

谢谢。我们的想法是将图像中的div缩小一点，比如30%左右。网格方法有什么问题？使用网格没有问题，我只是更喜欢flexbox，因为它相对于移动支持和整体易用性来说更简单、更现代。我可以把你的代码转换成flex格式，如果你想看看它会是什么样子的话