bootstrap 4 responsiveness

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

  .prev, .next {
    cursor: pointer;
    border-radius: 0 3px 3px 0;
    opacity: 0.50;
    user-select: none;
    transform: scale(0.75, 0.75);
    border:1px solid blue;
  }

  .centeredV{
    display: flex;
    justify-content: left;
    align-items: center;
    border: 1px solid red
  }

  .avatar {
    border:1px solid yellow;
  }

  .col-xs {
    border:1px solid red;
  }

  .tall {
    height: 100%;
  }

  .touchpointContainer {
    background-color: #F4F6F9;
    height: 90px;
    max-height: 90px;
    width: 700px;
    border:1px solid green;
  }

  .bootCol {
    border:2px solid black;
    background-color: #EECFC9;
  }

</style>

</head>

<body>

<div class="container touchpointContainer">
  <div class="row tall">
    <div class="col-sm-1 bootCol">
      <a onclick="advanceReview(-1)">
        <img class="prev" src="leftArrow.png"/>
      </a>
    </div>
    <div class="col-sm-8 bootCol">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore"
    </div>
    <div class="col-sm-2 bootCol">
      Image goes here
    </div>
    <div class="col-sm-1 bootCol">
      <a onclick="advanceReview(1)">
        <img class="next" src="rightArrow.png"/>
      </a>
    </div>
  </div>
</div>