Hide Carrousel images when opening on mobile and show others - Bootstrap 4

Question

I’m using the component Carrousel of bootstrap 4.

My intention is to make when it opens on PC and Tablet, be shown the slide with original images.

When opened on mobile phone, open another image lighter.

Carrousel: https://v4-alpha.getbootstrap.com/components/carousel/

Grid: https://v4-alpha.getbootstrap.com/layout/grid/

<div id="carouselInicio" 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" role="listbox">
        <div class="carousel-item active">
            <img class="d-block img-fluid" src="imagens/carrosel-site.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="imagens/carrosel-app.jpg"  alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="imagens/carrosel-arquitetura.jpg" alt="Third slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="imagens/carrosel-projetos.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselInicio" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Anterior</span>
    </a>
    <a class="carousel-control-next" href="#carouselInicio" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Próximo</span>
    </a>
</div>

Answer 1

Use media queries, try this way:

#carouselInicio
{
  @media screen and (max-width: 720px)
  {
    display: none;
  }
}

#img-mobile
{
  display: none;
  @media screen and (max-width: 720px)
  {
    display: block;
  }
}