Working with rows and columns boostrap - html

Question

So, I'm trying to make this boxes that will hold some text and maybe some img brackground, but boxes won't align like they should on a small screen.
I tried a few things, but text won't align on the botton without destroying the alignment
CSS:
.bigbox {
text-align: center;
padding: 80px 40px;
}
.bigbox .bigbox-title {
text-align: left;
font-size: 28px;
color: #fff;
}
.bigbox .bigbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
.smallbox {
text-align: center;
padding: 80px 40px;
}
.smallbox.smallbox-title {
text-align: left;
font-size: 28px;
color: #fff;
}
.smallbox.smallbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
HTML
<div class="full-width-container">
<div class="row no-space-row ">
<div class="col-sm-6 bg-color-base">
<div class="bigbox ">
<h2 class="bigbox-title">BOX 1</h2>
<p class="bigbox-text">DESCRIPTION</p>
</div>
</div>
<div class="col-sm-6">
<div class="smallbox bg-color-purple ">
<h2 class="smallbox-title">BOX 1</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
<div class="smallbox bg-color-purple-dark ">
<h2 class="smallbox-title">BOX 1</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
</div>
</div>
</div>

Answer 1

The key in this is display:flex on the parent div. This is forcing the two child divs to be the same height.
I have removed the padding from the second div to move it closer to the big box, then position:absoluted the big box title to the bottom of the div.
I've also played with the padding a bit to help with styling - but haven't got it styled to look just like the image above.
.row {
display:flex;
}
.bg-color-base {
background:red;
}
.bg-color-base + div{
padding:0;
}
.bg-color-purple {
background:purple;
}
.bg-color-purple-dark {
background:blue;
}
.bigbox {
text-align: center;
padding: 40px;
position:absolute;
bottom:0;
}
.bigbox .bigbox-title {
align-self: flex-end;
text-align: left;
font-size: 28px;
color: #fff;
}
.bigbox .bigbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
.smallbox {
text-align: center;
padding: 160px 40px 10px;
}
.smallbox.smallbox-title {
text-align: left;
font-size: 28px;
color: #fff;
}
.smallbox.smallbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="full-width-container">
<div class="row no-space-row ">
<div class="col-xs-6 bg-color-base">
<div class="bigbox ">
<h2 class="bigbox-title">BOX 1</h2>
<p class="bigbox-text">DESCRIPTION</p>
</div>
</div>
<div class="col-xs-6">
<div class="smallbox bg-color-purple ">
<h2 class="smallbox-title">BOX 2</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
<div class="smallbox bg-color-purple-dark ">
<h2 class="smallbox-title">BOX 3</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
</div>
</div>
</div>

Answer 2

Here you go. The text has to be in an absolutely positioned div.
http://codepen.io/ruchiccio/pen/Kzbeqa
.bcenter {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
text-align:center;
}