Behavior of vertical alignment

[visualcookie]

I have some weird behavior going on with vertical alignment of two columns. I want the first column to be in the middle of the whole container/row and the second column to be at the bottom but this won't work somehow (see Screenshot in Attachment).

NOTE: The .row and .container both have a height of 100% in CSS, so they fill up the whole screen. The page itself uses fullPage.js, that's why I needed that height.

HTML:

<div class="container">
   <div class="row">
      <div class="vertical-middle col-12">
         <h1>Hello World</h1>
      </div>

      <div class="vertical-bottom col-12">
         <h1>Hello World</h1>
      </div>
   </div>
</div>

[visualcookie]

An idea would be to do a position: absolute and a bottom: 0 on the second column, but this might break responsiveness.

[esr360]

I think I can see what you're trying to do. Are you confident that using a grid is the most appropriate way to achieve this? Personally, I would do something like this (using position: absolute like your idea):

http://codepen.io/esr360/pen/BooJEV

The reason it isn't working the way you are expecting is because you are essentially trying to vertically align 2 rows (the col-12 columns) inside a container, rather than aligning 2 columns (even though they have the column class, because they are full width they are essentially rows, as they stack above each other).

If you were adamant about using rows and columns, I think you would have to include some additional helpers:

http://codepen.io/esr360/pen/eppyVo

[visualcookie]

You're right. Since it's unknown height for both (first col-12 and second col-12) it's best case would be to use position: absolute on the second col-12.