Custom settings has been used to achieve the best solution for responsive images on this layout. A two column grid is used at <= 992px and a four column grid after that. Since the images never become wider than 456 pixels, we only need the thumbnail (320px) and iphone-landscape (480px) sizes.

<?php
$posts = get_posts( array(
  'posts_per_page' => 4,
  'rwp_settings' => array(
    'sizes' => array( 'thumbnail', 'iphone-landscape' ),
    'attributes' => array(
      'sizes' => '(min-width: 992px) 320px, (min-width: 720px) 480px, 320px'
    )
  )
) );
?>

The layout allows us to use thumbnail at almost any viewport. The exception is when the two column grid is being used between 720px and 991px.

IMG_0566

Blog post 1

IMG_2383

Blog post 2

IMG_2370

Blog post 3

IMG_6283

Blog post 4