title: Flexbox animations
body: <p>I want to animate my <code>flexbox</code> items when they <code>transform</code> from row to column while changing the size of browser window.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
  }
  div {   
      background-color : red;
      width:50px;
  }
  @media (max-width:500px) {
      body {
          flex-direction: column;     
      }
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;p&gt;1st block&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;p&gt;2nd block&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;p&gt;3rd block&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;p&gt;4th block&lt;/p&gt;
  &lt;/div&gt;    
  &lt;/body&gt;
  &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here I have 4 blocks  which I want to make it responsive but have some animations using <code>transition</code> property.
  Please use <code>transition</code> and explain where can I put that part of code in here. </p>