Based on the docs provided and the responsive codes, I'm expecting the columns to all be the same width.

<section class="pb-3 text-left text-lg-left">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 mb-r">
        <!--Section heading-->
        <h1 class="section-heading h1 text-left my-0 pt-4">Recent posts</h1>
      </div>
    </div>

    <div class="d-flex flex-sm-wrap flex-md-nowrap align-items-stretch">

      <div>
        <p class="mb-0">22 July 2017/ <span class="text-uppercase">#Design</span></p>
        <h2 class="h2-responsive">This is the title of the news</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatibus, ex, recusandae. Facere modi
          sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non
          quos laudantium
          veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
          suscipit
          laboriosam.</p>
        <a href="#" class="btn btn-blue btn-rounded waves-effect waves-light">Read more</a>
        <hr class="mt-3">
      </div>

      <div>
        <p class="mb-0">22 July 2017/ <span class="text-uppercase">#Design</span></p>
        <h2 class="h2-responsive">This is the title of the news</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatibus, ex, recusandae. Facere modi
          sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non
          quos laudantium
          veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
          suscipit
          laboriosam. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
          suscipit
          laboriosam.</p>
        <a href="#" class="btn btn-blue btn-rounded waves-effect waves-light">Read more</a>
        <hr class="mt-3">
      </div>

      <div>
        <p class="mb-0">22 July 2017/ <span class="text-uppercase">#Design</span></p>
        <h2 class="h2-responsive">This is the title of the news</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatibus, ex, recusandae. Facere modi
          sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non
          quos laudantium
          veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
          suscipit
          laboriosam.</p>
        <a href="#" class="btn btn-blue btn-rounded waves-effect waves-light">Read more</a>
        <hr class="mt-3">
      </div>

    </div>
</section>

I'd appreciate some guidance on using these classes to achieve this.