Working with rows and columns boostrap

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;
}