Listas e responsividade

Pessoal, boa noite!
Estou trabalhando no código de responsividade. Já fiz o código para resoluções grandes, agora preciso ajustar para tamanhos menores.
Eu fiz uma lista e nessa lista coloquei imagens. Para que essa imagens sejam substituídas por outras em uma resolução menor, como posso fazer. Segue exemplificação:


<section id="body-whats">
<ul>
<li><a href="link" target="_blank"><img src="imagem 1"></a>
<li><a href="link" target="_blank"><img src="imagem 2"></a>
<li><a href="link" target="_blank"><img src="imagem 3"></a>
</ul>
</section>
======================================================
Agora eu quero que na resolução 480px as imagens sejam outras:

<section id="body-whats">
<ul>
<li><a href="link" target="_blank"><img src="imagem x"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
</ul>
</section>

=====================================================
Eu já fiz esse tipo de ajuste com DIV, onde, na mudança de resolução eu conseguia apontar imagens diferentes, através do atributo <srcset>
Mas com lista eu não consegui encontrar nenhum indicativo ou ajuda para fazer o código.