Z-index not displaying properly

Question

I've placed 3 images in a row and I need the bottom of the first image to overlap the row beneath it. While in mobile view, I need the first image to overlap the second one. My problem is that even placing the z-index "properly" as I read in so many topics, I still don't get the desired outcome. I've changed the margins, placed the z-index value, gave the proper positioning to the images but still nothing happens.

Image 1 displays how is the current view,plus how it looks on mobile and image 2 how it should look if it works correctly.

Image 1 Image 2

Here is the HTML, I'm using for this specific part of the website:

     <div class="container-fluid">
            <div class="row ">   
                <div class = "three-images">
                        <div class="col-md-4 col-sm-4">
                            <img src = "image/sox.png" class = "img-responsive" id ="first-image">
                                <div class="carousel-caption">
                                        <div class ="text-one">
                                        <span><h1>About<br>ShortsTV<br>Oscars<br></h1></span>
                                        </div>
                                </div>
                        </div>

                        <div class="col-md-4 col-sm-4 ">
                            <img src = "image/2.jpg" class = "img-responsive" id ="second-image">
                            <div class="carousel-caption">
                                    <div class = "text-two">
                                        <div class ="who">WHO ARE WE</div>
                                        <span1><h3>Lorem ipsum dolor sit amet<br>adipiscing elit<br></h3></span1>
                                        <div class = "who">Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Nulla quam velit, vulputate eu<br>
                                                                        pharetna nec, mattis ac neque. Duis vulputate</div>
                                    </div>
                                        <a class="btn btn-primary" href="#" role="button">Watch Trailer</a>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-4">
                            <img src ="image/3.jpg" class ="img-responsive" id ="third-image">
                                    <div class="carousel-caption">
                                        <div class = "text-three">
                                            <span><h1>How to get
                                                    ShortsHD (US) or 
                                                    ShortsTV (Europe)
                                            </h1></span>
                                        </div>
                                    </div>
                        </div>

                </div>
            </div>

            <div class= "row">
                <div class ="big-image">
                    <img src = "image/4.jpg" class= "img-responsive">
                </div>
            </div>

Here is the CSS I used to edit the images:

             #first-image{
              height: 500px;
              position:absolute;
              z-index:30;
              margin-bottom: -30px;
              }

              #second-image{
              height: 440px;
              filter: brightness(50%);
              z-index:10;

              }

              .big-image{
               position:relative;
               z-index:20;

               }

Answer 1

use this

   #first-image{
              height: 500px;
              position:absolute;
              z-index:30 !important;
              margin-bottom: -30px;
              }

              #second-image{
              height: 440px;
              filter: brightness(50%);
              z-index:10 !important;

              }

              .big-image{
               position:relative;
               z-index:20  !important;

               }