For my logo I use CSS to display a different one according to the width size of the screen.
.logo1 {display:block;}
.logo2 {display:none;}
@media (min-width: 1150px) {
.logo1 {display:none;}
.logo2 {display:block;}
}
Then in the header I put both logo
<div class="logo1"><img src="logo1.png" width="118px" height="50px" /></div>
<div class="logo2"><img src="logo2.png" width="500px" height="80px" /></div>
If you do something similar for your blog content you should be able to get what you want using a different WP_Query in the two loops
https://codex.wordpress.org/Class_Reference/WP_Query