SOURCE

<div class='container'>
  <div class='bg-yellow'>验证flex布局：column和column-reverse切换的位移动画可行性</div>
  <div class='bg-red'>flex布局动画不可行</div>  
</div>

.container{
  display:flex;
  transition: all .3s;
  height: 30vh;
  width: 60vw;
}
.bg-yellow{
  flex: 1;
  background: #ffb11a;
}
.bg-red {
  flex: 1;
  background: #ff4600;
}