<div class="boxes">
   <div class="box box1">Box 1</div>
   <div class="box box2">Box 2</div>
   <div class="box box3">Box 3</div>
</div>
body {
  color: @beige;
}

.boxes {
  display:table;
  width: 100%;
  height: 100%;
}

.box {
  display: table-cell;
  text-align: center;
  vertical-align:middle;
  line-height: 13em;
}

.box1 {
  background: @orange;
}

.box2 {
  background: @green;
}

.box3 {
  background: @yellow;
}


@media (max-width: 420px) {
    .box {
        display: block;
        width: 100%;
    }
  
    .box2 {
      display: table-caption;
    }
  
    .box1 {
      display: table-footer-group;
    }
}

/*====== Ignore section below ======*/

@orange: #BD4932;
@yellow: #FFD34E;
@green: #105B63;
@beige: #FFFAD5;


/* Basic Style*/
* { margin:0; padding:0;}
html, body { height: 100%; }
button { padding: 5px 10px;position:absolute;bottom: 20px;left:20px;display: block; -webkit-appearance: none;background: @orange; outline: none;  border: 2px solid #DB9E36; color: @yellow; border-radius: 10px; box-shadow: 0 2px 3px rgba(0,0,0,0.5);cursor: pointer;}
button:active {border-color: @beige; color:@beige;}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.