Html CSS重新排列电子邮件中的文本？

我正在编辑一封电子邮件。我有下面这样的东西。是否有一种方法可以使用CSS重新排列下面的内容，使其看起来像下面的输出

<span id="one">One</span>
Hello friend
<span id="three">Three</span>
Hello friend 2
<span id="five">Five</span>
Hello friend 3
<span id="two">Two</span>
Hello friend 4
<span id="four">Four</span>

1
你好，朋友
三
你好，朋友2
五
你好，朋友3
两个
你好，朋友4
四

输出

一个

你好，朋友

两个

你好，朋友2

三

你好，朋友3

四

你好，朋友4

---

五个

据我所知，没有。CSS无法做到这一点

---

问题是CSS是为了“美化”DOM结构，而不是改变它。看起来您正在以一种无法预测元素顺序的方式构建DOM结构。

尝试将其添加到css中

span{
  display:block;
}

---

您可以使用css控制文档的呈现方式，使其与文档顺序不同。我会使用flexbox（display:flex）。 然而，它也依赖于HTML的某种常规结构，这不是我在示例中看到的。不确定您是否能够修改该选项

.container{
显示器：flex；
弯曲方向：立柱；
}
.首先{
顺序：1；
}
.第二{
顺序：2；
}
.第三{
顺序：3；
}
.福斯{
顺序：4；
}
.第五{
顺序：5；
}

这是第一次
这是第三次
这是第五次
这是第二次
这是第四次
简短的回答是否定的

这需要使用CSS属性和/或HTML属性，而不是每个电子邮件客户端都支持这些属性。有关更多详细信息，请参阅

电子邮件编码与网页编码不同。实际上，您只能使用跨主要客户端普遍支持的CSS属性和HTML属性。在电子邮件中使用flex box和其他花哨的CSS3属性并不总是可靠的

此外，用CSS重新排序HTML文档几乎从来都不是一个好的做法（除非绝对必要）。它会造成严重的可用性问题。
您可以在电子邮件中使用内联CSS。ID必须是唯一的。试着去上课。您尝试过什么CSS？我将id更改为唯一。您可以使用
order
如果您让您的项目使用flex box，则无法使用CSS修改不在元素中的文本。如果你能在元素中找到你的“hello”文本，那么我们就开始比赛了。否则，我认为这是不可能的。我假设在理论上，您可以将每个元素硬编码为
position:absolute
，并设置一个
top
值，对应于它应该垂直放置的位置，但这是令人难以置信的黑客行为。关于在电子邮件中使用flexbox的一些注意事项：主要的web邮件服务器不支持Flex。这忽略了OP示例中跨距之间的“hello friend”文本。@JonB OP只需将文本放在
div.{number}
中，这不会改变我看到的顺序。我没有看到中间有5个。块显示器将为他执行换行操作。js可以用来排序。