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