How can I recreate this responsive post layout?

You could use the Columns option in the Blog add-on.

Then set the excerpt to 0 in "Customize > Blog > Blog Content" and add this CSS:

.entry-summary {
    display: none;
}

That should get you pretty close :)

Okay, that is the look that I'm going for yes and works on my blog page but how do I get the same layout on other pages and not just the blog page?

Thanks in advance

You would have to use a plugin like this to create the columns: https://wordpress.org/plugins/lightweight-grid-columns/

Thank you very much that's it sorted

You're very welcome :)