Reverse cascade does not work properly

	<!-- Card -->
<div class="card card-cascade reverse">

  <!-- Card image -->
  <div class="view view-cascade overlay">
    <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Card image cap">
    <a href="#!">
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>

<!-- <div class="d-flex flex-row flex-wrap justify-content-center" style="width: 600px;"> -->
  <!-- Card content -->
  <div class="card-body card-body-cascade text-center">

    <!-- Title -->
    <h4 class="card-title"><strong>My adventure</strong></h4>
    <!-- Subtitle -->
    <h6 class="font-weight-bold indigo-text py-2">Photography</h6>
    <!-- Text -->
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.
    </p>

    <!-- Linkedin -->
    <a class="px-2 fa-lg li-ic"><i class="fa fa-linkedin"></i></a>
    <!-- Twitter -->
    <a class="px-2 fa-lg tw-ic"><i class="fa fa-twitter"></i></a>
    <!-- Dribbble -->
    <a class="px-2 fa-lg fb-ic"><i class="fa fa-facebook"></i></a>

  </div>

</div>
<!-- Card -->