title: Using different sized images on carousel in bootstrap for different device sizes
body: <p>So I don't know what the best practice would be to solve my problem. I'm making a webpage with a large edge-to edge carousel that sits below the navbar and looks great on desktops with a 1:3 ratio image size. On mobile, it looks too small and thin so I made a new set of images with a 2:3 ratio size I want to display on smaller screens in my carousel.</p>
  
  <p>How should I go about doing this? Javascript to change the images on different sizes? Hidden columns for the carousel on different port sizes with one for mobile and one for desktop? I just need to know the way that makes most sense/best practices to solve this problem.</p>
  
  <p>My carousel HTML for point of reference:</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
  
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;!--&lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;   optional   --&gt;
    &lt;/ol&gt;
  
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img class="first-slide" src="img/carousel/carousel1.jpg" alt="First slide"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img class="second-slide" src="img/carousel/carousel2.jpg" alt="Second slide"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img class="third-slide" src="img/carousel/carousel3.jpg" alt="Third slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" 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>