Display flex a few block with text in the same line - html

Question

I am trying to create a few block/box with image and two text - headline and subtext, but headline sometimes has one sentence, but another more, so if one has one and second one has two I would like to center vertically this first one.
For subtext I would like to vertically to the top.
Here is code which I am trying to use:
<div class="row row-home">
<div class="col-sm-4">
<img src="/images/home-1.png" alt="Schody" class="center-block img-responsive" />
<div class="text">
<h2>Schody</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
</div>
</div>
<div class="col-sm-4">
<img src="/images/home-2.png" alt="Balustrady" class="center-block img-responsive" />
<div class="text">
<h2>Balustrady i ogrodzenia</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
</div>
</div>
<div class="col-sm-4">
<img src="/images/home-3.png" alt="Meble" class="center-block img-responsive" />
<div class="text">
<h2>Meble</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
</div>
</div>
</div>
Here is CSS:
#home .text {
display: flex;
flex-direction: column;
-ms-flex-direction: column;
position: relative;
text-align: center;
padding: 10px 20px 30px;
margin: 0px auto 40px;
width: 100%;
height: 100%;
max-width: 236px;
z-index: 1;
}
#home .text h2 {
display: flex;
flex-direction: column;
-ms-flex-direction: column;
justify-content: center;
flex: 1 0 auto;
position: relative;
color: white;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
margin-top: 40px;
margin-bottom: 0px;
z-index: 2;
}
#home .text h3 {
position: relative;
color: white;
font-size: 12px;
text-align: justify;
text-transform: uppercase;
text-align-last: center;
z-index: 2;
}
It almost work, but if h3 has less text in one of blocks this text align to the bottom and h2 goes down.
Here is live website to test
I create picture to show how it should work

Answer 1

Since the h2 elements aren't aware of each other, I suggest you give them a height, or else you will need a extensive markup change
Here I added height: 28px; to the .row-home .text h2 rule
.row-home .text {
display: flex;
flex-direction: column;
-ms-flex-direction: column;
position: relative;
text-align: center;
padding: 10px 20px 30px;
margin: 0px auto 40px;
width: 100%;
height: 100%;
max-width: 236px;
z-index: 1;
}
.row-home .text h2 {
display: flex;
flex-direction: column;
-ms-flex-direction: column;
justify-content: center;
flex: 1 0 auto;
position: relative;
color: white;
font-size: 14px;
height: 28px;
font-weight: bold;
text-transform: uppercase;
margin-top: 40px;
margin-bottom: 0px;
z-index: 2;
}
.row-home .text h3 {
position: relative;
color: white;
font-size: 12px;
text-align: justify;
text-transform: uppercase;
text-align-last: center;
z-index: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-home">
<div class="col-sm-4">
<img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Schody" class="center-block img-responsive" />
<div class="text">
<h2>Schody</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
</div>
</div>
<div class="col-sm-4">
<img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Balustrady" class="center-block img-responsive" />
<div class="text">
<h2>Balustrady i ogrodzenia</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
</div>
</div>
<div class="col-sm-4">
<img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Meble" class="center-block img-responsive" />
<div class="text">
<h2>Meble</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
</div>
</div>
</div>
</div>
Updated with a second version based on a comment
If you want this to be really dynamic, you'll need to break it down like this, where you make the col-sm-4 flex items
Updated again, with a media query, to utilize Flexbox's order property and re-position the elements on smaller screens
.row-home {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.row-home .col-sm-4 {
min-width: 0;
flex-basis: 33%;
padding: 10px 20px 30px;
}
.row-home .col-sm-4.vcentered {
align-self: center;
}
.row-home .col-sm-4 h2 {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
.row-home .col-sm-4 h3 {
font-size: 12px;
text-align: justify;
text-transform: uppercase;
text-align-last: center;
}
#media (max-width: 600px) {
.row-home .col-sm-4 {
flex-basis: 51%;
}
.row-home .col-sm-4 * {
text-align: center;
}
.row-home .col-sm-4:nth-child(3n+1) {
order: 1;
}
.row-home .col-sm-4:nth-child(3n+2) {
order: 2;
}
.row-home .col-sm-4:nth-child(3n+3) {
order: 3;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-home">
<div class="col-sm-4">
<img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Schody" class="center-block img-responsive" />
</div>
<div class="col-sm-4">
<img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Balustrady" class="center-block img-responsive" />
</div>
<div class="col-sm-4">
<img src="http://malykowal.linuxpl.eu/images/home-1.png" alt="Meble" class="center-block img-responsive" />
</div>
<div class="col-sm-4 vcentered">
<h2>Schody this is some extra text I added for test</h2>
</div>
<div class="col-sm-4 vcentered">
<h2>Balustrady i ogrodzenia</h2>
</div>
<div class="col-sm-4 vcentered">
<h2>Meble</h2>
</div>
<div class="col-sm-4">
<h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit.</h3>
</div>
<div class="col-sm-4">
<h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
</div>
<div class="col-sm-4">
<h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
</div>
</div>
</div>