Bootstrap 4

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<section class="h-50 container-fluid">
  <div class="row h-100 header_content_row purple">
    <div class="col-4 h-100 red">
      foo
    </div>
    <div class="col-4 h-100 green">
      bar
    </div>
    <div class="col-4 h-100 blue">
      whiz
    </div>
  </div>
</section>

sm
<section class="h-50 container-fluid">
  <div class="row h-100 header_content_row purple">
    <div class="col-sm-4 h-100 red">
      foo
    </div>
    <div class="col-sm-4 h-100 green">
      bar
    </div>
    <div class="col-sm-4 h-100 blue">
      whiz
    </div>
  </div>
</section>

md
<section class="h-50 container-fluid">
  <div class="row h-100 header_content_row purple">
    <div class="col-md-4 h-100 red">whiz
    </div>
    <div class="col-md-4 h-100 green">bar
    </div>
    <div class="col-md-4 h-100 blue">foo
    </div>
  </div>
</section>

CSS

html,
body {
  height: 100%;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.purple {
  background-color: purple;
}