title: How can I use CSS transitions to animate a responsive layout's vertical orientation?
body: <p>I am trying to figure out a way to smoothly animate a responsive change to some elements' <code>display</code> property when the browser size reaches a certain breakpoint. I would like to use CSS transitions, but they do not apply to the <code>display</code> property so I may have to figure out a workaround. To be clear, I am only having trouble animating changes to the vertical orientation of elements that were previously arranged horizontally. Other, simple, responsive animations have been set up without issue.</p>
  
  <p><a href="http://jsfiddle.net/brianjsullivan/ULvqT/" rel="nofollow">Here is a simple example</a></p>
  
  <p>In that example, I have set up effective transitions for the div dimensions that activate at given breakpoints. The final (smallest window) transition causes the divs to line up vertically. At first, this was achieved by simply changing the divs from <code>display:inline-block;</code> to <code>display:block;</code>. However, this could not be animated using CSS transitions, so I tried an alternative method. The alternative involved changing the divs from <code>position:relative;</code> to <code>position:absolute;</code> and adjusting their <code>top</code> properties. I thought CSS transitions would be able to effectively animate the change in <code>top</code> but that does not seem to happen.</p>
  
  <p>Does anyone have any suggestions?</p>