css - two elements swap position

We often face the situation where two elements exchange positions, such as:

The content on the left changes to the right

 

 

The first one can use flex-flow:row-reverse to exchange positions

<div class="test"><span>左</span><span>右</span></div>

.test{
  width: 200px;
  display: flex;
  justify-content: space-between;
  flex-flow: row-reverse;  //关键
}

The second uses float

span{
  float: left;
}
span:first-child{
  float: right;
}