Layout and Picture Elements

Task: Create a flexible grid that substitues different images at different breakpoints.

Requirements:

// Layout Requirements

The starting layout should be single column up to 600px wide.

At 600px wide the layout should rearrange into two columns.

At 1024px wide the layout should rearrange into it's final layout of three columns.

If the screensize is larger than 1024px the layout should stay 1024px wide and stay centered.


// Picture Requirements

340px
400px
600px
512px

Up to 400px wide the picture src should be - http://placehold.it/400x400

From 400px to 600px the picture src should be - http://placehold.it/600x600

From 600px to 800px the picture src should be - http://placehold.it/400x400

From 800px to 1020px the picture src should be - http://placehold.it/512x512

At 1024px the picture scr should be -  http://placehold.it/340x340

The Fallback should be 600px - http://placehold.it/600x600