如何使用Css交换元素位置

Question

我想使用CSS更改两个元素的位置。

我的网站结构如下，显示为del ins。

<span class="main-price">
<del aria-hidden="true">
<span class="price">
</del>
<ins>
<span class="price">
</ins>
</span>

没有CSS应用于这些元素。

所以我应用了如下CSS。

.main-price{
text-align: left;
display: inline-flex;
flex-direction: column-reverse;
}

但是，这将垂直放置两个元素，如下所示。

ins
del

所以我重新应用了下面的css，仍然没有改变。

.ins{
display:inline;
}

我已经尝试过很多次了，但无论我做什么，它都不会显示为ins del。

有人能给我一些建议吗？

Answer 1

使用flex-direction: row-reverse而不是flex-direction: column-reverse。