Responsive Images and Pictures

Responsive Images and Pictures// Layout Requirements The default layout should be single column up to 600px wide. (Mobile First) At 600px wide the layout should switch from one column 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 wrapper div should stay 1024px wide and be centered. // Picture Requirements 340px x 340px 400px x 400px 600px x 600px 512px x 512px With a screen width up to 400px wide the picture src should be - 400x400 With a screen width from 400px to 600px the picture src should be - 600x600 With a screen width from 600px to 800px the picture src should be - 400x400 With a screen width from 800px to 1024px the picture src should be - 512x512 With a screen width beyond 1024px the picture src should be - 340x340 The default layout image size should be 600px - 600x600