Equal height elements in Bootstrap 3.3.7 cards using Flexbox

Question

I'm trying to create a card group template to use on our Bootstrap 3.3.7 website. This card group template would have rows set up where they would always be the same height across all three or four cards.

For example, this is one way it might be used:

• Row 1: Header (text)
• Row 2: Speed info (text with one icon image)
• Row 3: Speed icon (image)
• Row 4: Price (text)
• Row 5: Legal
• Row 6: Description (text)
• Row 7: CTA button

Here's another way. The following cards would only require four rows:

• Row 1: Header (text)
• Row 2: Title (text)
• Row 3: Description (text)
• Row 4: CTA

Here's what I've started, but I can't get the rows to match in height.

  <div class="container">
    <div class="mm-card-container">
      <div class="mm-card-column">
        <div class="mm-card-row1">
          <h4>Column 1</h4>
        </div>
        <div class="mm-card-row2">
          <p>Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. </p>
        </div>
        <div class="mm-card-row3">
          <p>Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. </p>
        </div>
      </div>
      <div class="mm-card-column bg-alt">
        <div class="mm-card-row1">
          <h4>Column 2</h4>
        </div>
        <div class="mm-card-row2">
          <p>Content goes here. Content goes here.</p>
        </div>
        <div class="mm-card-row3">
          <p>Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. </p>
        </div>
      </div>
    </div>
  </div>
</body>

.mm-card-container{
    width: 100%;
    min-height: 300px;
    margin: 0 auto;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standard syntax */
}
.mm-card-container .mm-card-column{
    padding: 10px;
    background: #dbdfe5;
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
}
.mm-card-container .mm-card-column.bg-alt{
    background: #b4bac0;
}

.mm-card-row1 {
  background-color: cyan;
  align-items: stretch;
}
.mm-card-row2 {
  background-color: yellow;
  align-items: stretch;
}
.mm-card-row3 {
  background-color: pink;
  align-items: stretch;
}