<div class="mobile-first">
  <h2>Mobile First</h2>
  <div class="sales-points">
    <div class="sales-point">
      <h3>Point 1</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="sales-point">
      <h3>Point 2</h3>
      <p>Obcaecati amet aperiam nobis illum?</p>
    </div>
    <div class="sales-point">
      <h3>Point 3</h3>
      <p>Nihil saepe asperiores delectus repudiandae.</p>
    </div>
  </div>
</div>

<div class="desktop-first">
  <h2>Desktop First</h2>
  <div class="sales-points">
    <div class="sales-point">
      <h3>Point 1</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="sales-point">
      <h3>Point 2</h3>
      <p>Obcaecati amet aperiam nobis illum?</p>
    </div>
    <div class="sales-point">
      <h3>Point 3</h3>
      <p>Nihil saepe asperiores delectus repudiandae.</p>
    </div>

  </div>

.mobile-first,
.desktop-first {
  padding: 1em;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  margin: 2em auto;
  max-width: 750px;
}

/*  mobile-first */
@media (min-width: 600px) {
  .mobile-first .sales-points {
    display: flex;
    justify-content: space-between;
  }

  .mobile-first .sales-point {
    width: 30%;
  }
}

/* desktop first */
.desktop-first .sales-points {
  display: flex;
  justify-content: space-between;
}

.desktop-first .sales-point {
  width: 30%;
}

@media (max-width: 600px) {
  .desktop-first .sales-points {
    display: block;
  }

  .desktop-first .sales-point {
    width: 100%;
  }
}