Анимированая перестановка блоков

$('#swap').click(function(e) { 
  e.preventDefault(); 
	$('.swap0').toggleClass('swap1'); 
});

.bk1 { 
    background: #f00; 
    width: 100px; 
    height: 100px; 
   
    transition: all 1s ease-in-out; 
    position: absolute; 
    top: 0; 
} 
 
.bk2 { 
    background: #0f0; 
    width: 100px; 
    height: 100px; 
   
    transition: all 1s ease-in-out; 
    position: absolute; 
    top: 100px; 
} 
 
.swap0 { 
	height: 200px; 
    width: 100px; 
    position: relative; 
} 
 
 
.swap1 .bk1 { 
	top: 100px; 
} 
.swap1 .bk2 { 
	top: 0px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<div class="wrap swap0"> 
	<div class="bk1"> 
 
	</div> 
	<div class="bk2"> 
 
	</div> 
</div> 
 
<a href="#" id="swap">SWAP THIS</a>

$('#swap').click(function(event) { 
  event.preventDefault() 
  $('.swap0').toggleClass('swap1'); 
});

.bk1 { 
  background: #f00; 
  width: 100px; 
  height: 100px; 
  animation-duration: 1.25s; 
  animation-fill-mode: forwards; 
  animation-name: slideOut; 
} 
.bk2 { 
  background: #0f0; 
  width: 100px; 
  height: 100px; 
  animation-duration: 1.25s; 
  animation-fill-mode: forwards; 
  animation-name: slideIn; 
} 
.swap0 { 
  display: flex; 
  flex-direction: column; 
} 
@keyframes slideIn { 
  0% { 
    transform: translateY(-100%); 
  } 
  100% { 
    transform: translateY(0); 
  } 
} 
@keyframes slideOut { 
  0% { 
    transform: translateY(100%); 
  } 
  100% { 
    transform: translateY(0); 
  } 
} 
.swap1 .bk1 { 
  animation-name: slideIn; 
  order: 2; 
} 
.swap1 .bk2 { 
  animation-name: slideOut; 
  order: 1; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrap swap0"> 
  <div class="bk1"> 
 
  </div> 
  <div class="bk2"> 
 
  </div> 
</div> 
 
<a id="swap">SWAP THIS</a>