Bootstrap: align elements to bottom of column

Question

To explain it in a short way, this is what I'm trying to achieve: http://www.bootply.com/Muh7eahFC8#

A responsive design, with three columns, and a button at the bottom of each column.

The problem is that I'm setting the height of the columns manually, and I'd like the whole thing to automatically adapt to the longest content of the three column.

Right now, I'm setting a different height based on the size of each viewport:

@media only screen and (min-width : 992px) {
  div {
    height: 180px;
  }
  div a {
    position: absolute;
    bottom: -40px;
  }
}

@media only screen and (min-width : 1200px) {
  div {
    height: 140px;
  }
}

(Give it a try on different screen width)

I think that what I'm trying to achieve is pretty common. Isn't there a smarter wayt to achieve it?

-- edit

With @DavidG help I could fins a responsive solution: http://www.bootply.com/7C2WvyxNyZ unfortunately hte 33% is hardcoded, if I change the number of columns I'll have to update the css, and I found NO WAY to center the buttons in each column

Answer 1

Can't remember where I got this snippet from but this will make your columns the same height:

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Then with a couple of tweaks, you can force the anchors to be fixed to the bottom of the div.

http://www.bootply.com/crLlXiiKqk