A Responsive Design Challenge for the Sophisticated

Question

css

http://jsfiddle.net/ccbpp/

Objective: Make the three existing blocks the same height and width while maintaining the fluid design.
When narrowing the screen, they should rebuild into one column (in a stack), occupying the entire width of the column.
The text should be centered vertically relative to the pictures. Pictures vary slightly in size.
Parts of the link text should not wrap under the image. Only a complete transfer of text under the image is allowed, but only when the screen is narrowed.

The code section is intended for use on devices with different screen sizes, from desktops to smartphones.

PS You can use code that handles the screen width when the screen is very narrow (less than 500px).
@media only screen and (min-width: 100px) and (max-width: 499px), only screen and (min-device-width: 100px) and (max-device-width: 499px) {...}

Answer 1

jsfiddle.net/ccbpp/27/

Answer 2

It seems to me that everything could be simpler here: just use the CSS keys "min-width" - "max-width", "min-height" - "max-height".