Css 如何更改块内相同内容的位置

我使用react，所以我有4个简单的块，从左到右

    <div className="box wrapper">
      <img alt="customAlt" src={image} />
      <p>{text} </p>
    </div>

我想知道它是应该在css中完成，还是有合适的方法在react中完成？因为我将所有数据存储在其他文件中，所以我不希望复制内容

---

请给出建议，谢谢。

您的CSS看起来不太正确。您有两个类，“box”和“wrapper”，因此将它们之间的空格替换为一个点。看看CSS选择器可能会很有用

“偶数”必须在第n个孩子之后出现。请尝试以下方法：

.box.wrapper:nth-child(even) p {
   order: 1
}

.box.wrapper:nth-child(even) img {
   order: 2
}

要添加澄清，.box.wrapper:n子元素（偶数）p就像是说，在父元素具有类“example”的每个元素的每个均匀索引子元素中，选择每个段落标记

---

另外，我不知道flexbox的order属性，尽管我一直在使用它，所以谢谢

它应该是

。包装盒：第n个孩子（偶数）p

谢谢它的工作

.box.wrapper:nth-child(even) p {
   order: 1
}

.box.wrapper:nth-child(even) img {
   order: 2
}