Tenho o seguinte código:
<div class="container-fluid">
<h1> Áreas de Atuação </h1>
<div id="hr-atuacao">
<hr>
<div class="card-columns">
<div class="card-img">
<img class="img-fluid" src="Imagens/saiba-mais-1.png">
<a id="botao1-card" href="#" class="btn btn-primary">Saiba Mais</a>
<div class="card-img">
<img class="img-fluid" src="Imagens/saiba-mais-1.png">
<div class="card-img">
<img class="img-fluid" src="Imagens/saiba-mais-1.png">
</div>
</div>
</div>
</div>
<div class="card-columns">
<div class="card-img">
<img id="civil" class="img-fluid" src="Imagens/saiba-mais-1.png">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
<img class="img-responsive" src="../../card.jpg" /> <!--Mobile-->
</div>
</div>
<div class="card-img">
<img class="img-fluid" src="Imagens/saiba-mais-1.png">
<div class="card-img">
<img class="img-fluid" src="Imagens/saiba-mais-1.png">
</div>
</div>
</div>
</div>
<div class="card-columns">
<div class="card-img">
<img class="img-fluid" src="Imagens/saiba-mais-1.png">
<div class="card-img">
<img class="img-fluid" src="Imagens/saiba-mais-1.png">
<div class="card-img">
<img class="img-fluid" src="Imagens/saiba-mais-1.png">
</div>
</div>
</div>
</div>
</div>
</div>
Existe algum jeito de quando eu mudar a tela para dispositivos móveis, a imagem que aparece dentro dos cards mude? Eu precisava colocar uma imagem menor e diferente quando isso acontecer mas não tenho ideia de como fazer isso.