bootstrap 4 - how to make a carousel bigger only on mobile screens? -

i'd make bigger carousel on mobile devices. there way accomplish this? @ code, you'll see carousel on mobile screen tiny: https://codepen.io/codewife_101/pen/xejalr

<nav class="navbar navbar-expand-sm navbar-light bg-light">        <div class="container">          <a class="navbar-brand" href="#">brand name</a>            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarnav2"><span class="navbar-toggler-icon"></span></button>              <div class="collapse navbar-collapse" id="navbarnav2">                  <ul class="navbar-nav ml-auto">                      <li class="nav-item">                          <a class="nav-link" href="#">home</a>                      </li>                      <li class="nav-item">                          <a class="nav-link" href="#">about</a>                      </li>                      <li class="nav-item">                          <a class="nav-link" href="#">products</a>                      </li>                      <li class="nav-item">                          <a class="nav-link" href="#">contact</a>                      </li>                  </ul>              </div>          </div>    </nav>      <!--showcase-->  <section id="showcase">    <div id="carouselexampleindicators" class="carousel slide" data-ride="carousel">      <ol class="carousel-indicators">        <li data-target="#carouselexampleindicators" data-slide-to="0" class="active"></li>        <li data-target="#carouselexampleindicators" data-slide-to="1"></li>        <li data-target="#carouselexampleindicators" data-slide-to="2"></li>      </ol>      <div class="carousel-inner">        <div class="carousel-item active">          <img class="d-block w-100" src="http://lorempixel.com/1600/450" alt="first slide">        </div>        <div class="carousel-item">          <img class="d-block w-100" src="http://lorempixel.com/1600/450" alt="second slide">        </div>        <div class="carousel-item">          <img class="d-block w-100" src="http://lorempixel.com/1600/450" alt="third slide">        </div>      </div>      <a class="carousel-control-prev" href="#carouselexampleindicators" role="button" data-slide="prev">                <span class="carousel-control-prev-icon" aria-hidden="true"></span>        <span class="sr-only">previous</span>      </a>      <a class="carousel-control-next" href="#carouselexampleindicators" role="button" data-slide="next">        <span class="carousel-control-next-icon" aria-hidden="true">        <span class="sr-only">next</span>      </a>  </div>  </section>

the idea upload 3 different pictures 1, 2, 3. used lorempixels showing desired size, in real life want upload 3 different pictures. solution given @cwanjt works minor adjustments, end-result, need different. i'm thinking "hidden" classes in bootstrap 4. thoughts? css:

.carousel-inner > .item > img { min-width: 100%; width: 100%; }

i'll take guess @ you're trying accomplish , i'm in ballpark. instead of having 2 different carousels, can use old css media queries change url img elements.

remove src attributes img elements, , create class implements content property url(path/to/image/file) value.

.change-img {       content: url(http://lorempixel.com/1600/750);     } 

now create media query change value of url when viewport reaches specified size.

@media screen , (max-width: 700px) {     .change-img {       content: url(http://lorempixel.com/1600/1550);     } } 

add class img element.

<div class="carousel-inner">       <div class="carousel-item active">         <img class="d-block w-100 change-img" alt="first slide">       </div>       ... 

i forked codepen , implemented code, can see working. resize browser 700px , you'll see first image in carousel have larger height.