Tenho um banner rotativo conforme o código abaixo. Por enquanto ele só tem uma imagem:
<section id="main-slider" class="no-margin">
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active" style="background-image: url(images/slider/bg1.png)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-5 pull-right">
<div class="carousel-content" style="text-align: center">
<h2 class="animation animated-item-1"><span style="color: #FFE805">Aqui</span> <br><span>é o título</span></h2>
<div align="center">
<h3 class="animation animated-item-1"><span style="color: #FFE805">Aqui subtítulo</span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Porém nas versões mobile, a imagem do banner fica muito grande. Como eu poderia fazer para que dentro do CSS eu incluísse essa imagem em acesso desktop e no modo mobile aparecesse outra imagem? Estou usando o Bootstrap 3.