how to stick multiple buttons to multiple panels with different content - html

Question

I have a website (http://defensemonkees.nl/) and we have 3 panels on the index page. I made a flex-box with 3 items in it and then i used stretch to make all the panels the same height. But I want to have the buttons stick to the bottom. I have tried a sticky footer method but it only works on one button at a time. In that case it would even be easier to just a margin-top on the 2 left buttons. But I think there must be a cleaner solution to solve the problem in general instead of just "hard-code". I don't have posted all the CSS cause most of it is handled by Bootstrap.
<div id="flexBox3Monkees">
<div class="panel panel-default item">
<div class="panel-heading">
<h3 class="panel-title">Voor wie?</h3>
</div>
<!-- end panel-heading -->
<img src="Content/Images/WebMonkee.png" alt="DefenseMonkees Logo" class="img-circle monkeyPic" />
<p class="indexP">
Krav Maga is geschikt voor iedereen! Geen enkele ervaring met zelfverdediging?
Jong, oud, man, vrouw, sportief en 'niet' sportief, bij DefenseMonkees begeleiden wij
u stap voor stap zodat u een conflict ontloopt of beëindigd op de meest efficiënte manier.
We simuleren realistische situaties en zorgen er samen voor dat u een uitstekende
conditie krijgt!
</p>
<div class="indexbutton">
Impressie
</div>
</div>
<div class="panel panel-default item">
<div class="panel-heading">
<h3 class="panel-title">DefenseMonkees</h3>
</div>
<!-- end panel-heading -->
<img src="Content/Images/WebMonkee.png" alt="Logo DefenseMonkees" class="img-circle monkeyPic" />
<p class="indexP">
De instructeurs van DefenseMonkees zijn er trots op dat vrijwel al onze studenten
in een vrij korte periode van inspanning een gezonder en fitter lichaam hebben gekregen,
zich veiliger zijn gaan voelen en zelfverzekerder over straat durven. Dit motiveert
DefenseMonkees om continu de beste resultaten te blijven na streven.
</p>
<div class="indexbutton buttonPositionCustom2I">
Succes verhalen
</div>
</div>
<!-- end panel -->
<div id="indexPanel" class="panel panel-default item">
<div class="panel-heading">
<h3 class="panel-title"><%= GetNextTraningDate() %> </h3>
</div>
<!-- end panel-heading -->
<img src="Content/Images/WebMonkee.png" alt="Logo DefenseMonkees" class="img-circle monkeyPic" />
<p class="indexP">Voor maar €36 per maand kunt u bij DefensMonkees 8 keer per maand trainen in Maastricht, Heerlen, Sittard of Utrecht.</p>
<p class="indexP">
Wees gerust, beginnen is heel eenvoudig! Onze professionele instructeurs begeleiden u
stap voor stap dus wacht niet langer en neem vanavond nog een gratis proefles.
</p>
<div class="indexbutton buttonPositionCustom3I">
<a href="Proefles.aspx" id="buttonRed" class="btn btn-danger btn-block indexbutton">
<span class="glyphicon glyphicon-hand-up"></span> Boek gratis proefles</a>
</div>
</div>
</div>
CSS
#flexBox3Monkees {
display: flex;
justify-content: space-around;
align-items: stretch;
text-align: center;
}
.item {
/*border: black 2px solid;*/
width: 30%;
}
#media(max-width:767px) {
#flexBox3Monkees {
flex-direction: column;
margin-top: 40px;
}
.item {
width: 100%;
}
}

Answer 1

Try this?
DEMO
.item {
display: flex;
flex-direction: column;
}
.panel-heading {
flex: 0 0 100%;
}
img {
flex: 0 0 100%;
}
p {
flex: 1;
}
.indexbutton {
flex: 0 0 100%;
}