In Adobe's introduction videos for responsive web design it shows that the browser window is slimmed to trigger the ipad settings, THEN the browser window overlaps the div content until the mobile setting is triggered, rather than squeezing the page through every moment of the transition.

How is this accomplished?

Here is the video (skip to 28s to see that the browser is actually overlapping the div content rather than squeezing it until the mobile settings are triggered)