.president-section {
  background-color: #545454;
  margin: 1rem 0;
}

.president-details {
  padding-right: 0px;
  padding-left: 0px;
}

blockquote {
  color: #fff;
  display: block;
  font-weight: 700;
  font-style: italic;
  position: relative;
  font-size: 30px;
  line-height: 36px;
  padding: 5%;
}

@media screen and (max-width: 767px) {
  .president-details img {
    margin: 20px auto;
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .president-section {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    margin-top: 100px;
    margin-bottom: 200px;
    left: 50%;
    height: 300px;
  }
  .president-details {
    transform: translate(-50px,-70px);
    width: 300px;
  }
  blockquote {
    font-size: 20px;
    line-height: 26px;
  }
  @media screen and (min-width: 992px) {
    blockquote {
      font-size: 30px;
      line-height: 36px;
    }
  }
  @media screen and (min-width: 1200px) {
    .quote {
      transform: translate(-100px,0);
    }
  }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background-color: #e5a09c;">
  <p>Cupcake ipsum dolor sit amet cake croissant fruitcake muffin. Sweet bonbon candy powder cheesecake muffin sesame snaps jujubes. Muffin macaroon cheesecake cookie souffl&eacute; cookie cheesecake lollipop candy canes. Halvah cotton candy sesame snaps
    chocolate bar. Sugar plum dessert drag&eacute;e macaroon chupa chups. Cake cheesecake wafer cotton candy. Danish jelly halvah jelly beans tootsie roll donut. Halvah cheesecake halvah jujubes sweet roll biscuit croissant wafer. Cake halvah chocolate
    bar sugar plum apple pie.</p>


  <div class="row president-section">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-5 col-lg-4">
          <div class="president-details">

            <img class="img-fluid" src="https://drive.google.com/uc?id=1n1Bc9Xnu6N2UEzTqXN5ZpRN_W8m6mhAG">

            <p class="president-name text-center"><strong>President's Name</strong></p>


          </div>


        </div>

        <div class="col-12 col-md-7 col-lg-8 quote">
          <div class="row">
            <blockquote>
              &ldquo;Cupcake ipsum dolor sit amet cake croissant fruitcake muffin. Sweet bonbon candy powder cheesecake muffin sesame snapsjujubes. Muffin macaroon cheesecake&rdquo; <cite>-Richard Something</cite>
            </blockquote>
          </div>
        </div>
      </div>

    </div>
  </div>

  <h3>Members</h3>

  <div class="row img-row">
    <div class="col-6 col-md-3"><img src="https://via.placeholder.com/163x240" /> <strong>Immediate Past President</strong>

      <div class="name">John Doe 1</div>
    </div>

    <div class="col-6 col-md-3"><img src="https://via.placeholder.com/163x240" /> <strong>Executive Director</strong>

      <div class="name">John Doe 2</div>
    </div>

    <div class="col-6 col-md-3"><img src="https://via.placeholder.com/163x240" /> <strong>President-Nominee</strong>

      <div class="name">John Doe 3</div>
    </div>
    <!-- Row 2 -->

    <div class="col-6 col-md-3"><img src="https://via.placeholder.com/163x240" /> <strong>John Doe 4</strong>

      <div class="term">Term: 2019&ndash;2022</div>
    </div>
  </div>
</div>