<div  class="container">

  <div class='row'>
    <div class='col'>
      <img id='main' src='https://upload.wikimedia.org/wikipedia/commons/f/fe/Procyon_lotor_%28Common_raccoon%29.jpg'>
    </div>

    <div class='col'>

      <div><img class='my-img' src='https://upload.wikimedia.org/wikipedia/commons/f/fe/Procyon_lotor_%28Common_raccoon%29.jpg'></div>
      <div><img class='my-img' src='https://www.almanac.com/sites/default/files/styles/opengraph/public/image_nodes/raccoon-pest-removal-garden.jpg' </div>
        <div><img class='my-img' src='https://farm4.static.flickr.com/3914/15321511066_80bc2938c3_b.jpg' </div>

        </div>

      </div>
    </div>

    <div id='title'>raccoons paradise</div>

.my-img {
  width: 100px;
  cursor: pointer;
  margin: 5px;
}

#main {
  width: 100%;
}

#title{
  font-size:1.2em;
  background-color:black;
  margin:0.1em;
  padding:.1em;
  color:white;position:absolute
  
}

$("body").on("click", ".my-img", function () {
  $("#main").attr("src", $(this).attr("src"));
  // для кнопок нужно использовать миниатюры.
 
  
});