Bootstrap to have columns with same height

Question

I have 2 columns in a page using Bootstrap but one column is larger than the other one. What I want to do is have both columns be the same height so that I can align the contents of the shorter column at the bottom.

I've read a couple approaches like margins, flexbox, and tables.

I tried flexbox and it works for bigger screen sizes but when I go to mobile sizes the columns do not get stacked like they used to before I added flexbox styling on them. The margins I haven't tried yet because it feels a little hacky for me. The tables - I don't know, I just don't like using tables for layout in general.

Here a Fiddle if you want to take a stab at it.

HTML

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="col-md-12">
        <h4 class="search-header bold">Deadline</h4>
        <div class="form-group">
          <label for="select-deadline" class="control-label">Deadline Type</label>
          <select name="deadline" id="select-deadline" class="form-control">
            <option value="">Upcoming</option>
            <option value="" selected="selected">Sponsor</option>
            <option value="">Internal</option>
          </select>
        </div>
        <div class="form-group">
          <label for="input-days" class="control-label">Due Within How Many Days?</label>
          <input type="text" class="form-control" id="input-days" />
        </div>
        <div class="divider bold italic"><span class="divider-line">&mdash;</span> or <span class="divider-line">&mdash;</span></div>
        <div class="form-group">
          <label for="input-date" class="control-label">Last Day to Search</label>
          <input type="text" class="form-control" id="input-date" />
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="col-md-12 action-btn-container">
        <button type="button" class="btn btn-default btn-action">Clear All</button>
        <button type="button" class="btn btn-default btn-action">Search</button>
      </div>
    </div>
  </div>
</div>

CSS

.action-btn-container {
  text-align: right;
}

UPDATE:

Here's a Fiddle with how I tried to solve the problem using flexbox.

Answer 1

I tried flexbox and it works for bigger screen sizes but when I go to mobile sizes the columns do not get stacked like they used to before I added flexbox styling on them.

An initial setting of a flex container is flex-wrap: nowrap.

This means that, by default, the child elements ("flex items") will be forced to stay in a single line regardless of screen size.

If you want the columns to stack vertically on smaller screens, add this to the container:

flex-wrap: wrap