css-两个元素交换位置

我们经常会面临两个元素交换位置的情况，比如：

左边的内容变到右边

 

第一种  可以使用flex-flow:row-reverse来交换位置

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

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

第二种 使用float

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