Q:

How can I use CSS transitions to animate a responsive layout's vertical orientation?

I am trying to figure out a way to smoothly animate a responsive change to some elements' display property when the browser size reaches a certain breakpoint. I would like to use CSS transitions, but they do not apply to the display 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.
Here is a simple example
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 display:inline-block; to display:block;. However, this could not be animated using CSS transitions, so I tried an alternative method. The alternative involved changing the divs from position:relative; to position:absolute; and adjusting their top properties. I thought CSS transitions would be able to effectively animate the change in top but that does not seem to happen.
Does anyone have any suggestions?

A:

Your problem is that you change from relative to absolute. That can not be transitioned in any way. 
Just try to keep your styles and change only numeric properties.
For instance, you can keep using relative position, and adjust the left and top values accordingly:
@media (max-width: 680px) {
    .box {
        width:150px;
        height:150px;
    }
    #box1 {
        left: 165px;
        top:10px;
    }
    #box2 {
        left: 0px;
        top:170px;
    }
    #box3 {
        left: -165px;
        top:330px;
    }
}

demo
Change a little bit the style to avoid the ugly behaviour in smaller screens
@media (max-width: 680px) {
    .box {
        width:150px;
        height:150px;
        margin-left: -77px;
        margin-right: -77px;
        left: 0px;
    }
    #box1 {
        top:10px;
    }
    #box2 {
        top:170px;
    }
    #box3 {
        top:330px;
    }
}

new demo
The problem came when the container width could no longer hold the 3 divs, and they begin to flow to another row.

