How to swap element position using Css?

Question

I want to change the position of two elements using CSS.

The structure of my website is as follows and it show up del ins.

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

No CSS is applied to these elements.

So I applied CSS like below.

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

However, this will place the two elements vertically as shown below.

ins
del

So I re-applied the below css, still no change.

.ins{
display:inline;
}

I've tried many times other than that, but no matter what I do, it doesn't show up as ins del.

Can someone give me some advice on what to do?

Answer 1

Instead of flex-direction: column-reverse, use flex-direction: row-reverse.