title: How to change Image of Bootstrap Carousel on Mobile View?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*Carousel CSS for Mobile View*/
  @media (max-width: 425px){
    #banner-one img{
      background-image: url("/images/mobile_banner1.jpg") !important;
    }
    
    #banner-two img{
      background-image: url("/images/mobile_banner2.jpg") !important;
    }
    
    #banner-three img{
      background-image: url("/images/mobile_banner3.jpg") !important;
    }
    
    #banner-four img{
      background-image: url("/images/mobile_banner4.jpg") !important;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="carouselExampleControls" class="carousel slide" data-ride="carousel"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div id="banner-one" class="carousel-item active"&gt;
        &lt;img class="d-block w-100" src="/images/banner-one.jpg" alt="First slide"&gt;
      &lt;/div&gt;
      &lt;div id="banner-two" class="carousel-item"&gt;
        &lt;img class="d-block w-100" src="/images/banner-two.jpg" alt="Second slide"&gt;
      &lt;/div&gt;
      &lt;div id="banner-three" class="carousel-item"&gt;
        &lt;img class="d-block w-100" src="/images/banner-three.jpg" alt="Third slide"&gt;
      &lt;/div&gt;
      &lt;div id="banner-four" class="carousel-item"&gt;
        &lt;img class="d-block w-100" src="/images/banner-four.jpg" alt="Third slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"&gt;
      &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"&gt;
      &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have a Bootstrap Carousel in my project it works perfect in each and every view. But I want to change the carousel images of every slide in the Mobile View. I have tried everything but failed.</p>