<div class="hero container-fluid">
    <ul id="carousel" class="row">
      <li class="col-12 col-sm-6 col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/people" alt="">
        <div class="caption">
          <h2>Lorem ipsum dolor</h2>
          <p>A true story</p>
        </div>
        </a>
      </li>
      <li class="col-12 col-sm-6 col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/nature" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
      </li>
      <li class="col-12 col-sm-6 col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/arch" alt="">
        <div class="caption">
          <h2>My neighborhood</h2>
          <p>Lorm ipsum dolor</p>
        </div>
        </a>
      </li>
      <li class="col-12 col-sm-6 col-md-4">
        <a href="#"><img src="https://placeimg.com/300/200/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
      </li>
    </ul>
  </div>