我希望能在浏览器窗口大小变化时，通过
flexbox 的行向列的transform 动画效果来展示我的项目。<!DOCTYPE HTML>
<html>
<head>
<style>
body {
display: flex;
flex-direction: row;
justify-content: space-around;
}
div {
background-color : red;
width:50px;
}
@media (max-width:500px) {
body {
flex-direction: column;
}
}
</style>
<body>
<div>
<p>1st block</p>
</div>
<div>
<p>2nd block</p>
</div>
<div>
<p>3rd block</p>
</div>
<div>
<p>4th block</p>
</div>
</body>
</head>
</html>
这里有四个块，我想要使其具有响应式并带有一些使用transition属性的动画。请使用transition，并解释在这里可以放置代码的位置。