Vertical align UL to top of div - html

Question

I have three ul's added to a footer within bootstrap columns inside a parent row element, and I've used vertical-align:top for a similar footer before, but can't use this here to align each ul to the top of the parent div. (It's added to footer > row > .col > ul)
Any ideas?
Codepen: https://codepen.io/nickwcook/pen/aJPGeJ.
HTML:
<footer>
<row>
<div class="col col-sm-3">
<ul>
<li>Quick Menu</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="col col-sm-3">
<ul>
<li>Recent Posts</li>
<li>Post One</li>
<li>Post Two</li>
<li>Post Three</li>
</ul>
</div>
<div class="col col-sm-3">
<ul>
<li>About</li>
<li><a>Lorem ipsum dolor sit amet, vel decore vidisse an, id simul quaerendum usu. Et vis nemore mandamus. Ei pri dicit erroribus splendide. Alterum perfecto reprimique et nec, diam dolorum posidonium qui ei.</a></li>
</ul>
</div>
</row>
<row>
<p>Developed by My Name</p>
</row>
</footer>
CSS
footer {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background: #212121;
margin: 0;
z-index: 99;
}
footer>row {
display: flex;
align-items: center;
padding: 30px 5%;
}
footer>row:first-of-type {
justify-content: space-between;
}
footer>row>.col {
text-align: left;
}
footer>row>.col>ul>li:first-of-type {
color: #fff;
font-weight: 600;
font-size: 12px;
}
footer>row>.col>ul {
vertical-align: top;
padding: 0;
}
footer>row>.col>ul {
list-style-type: none;
padding: 0;
margin: 0;
}
footer>row>.col ul>li {
margin: 15px 0;
}
footer>row>.col ul>li>a {
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: #a5a5a5;
}
footer>row>.col ul>li>a:hover {
text-decoration: none;
color: #fff;
}
footer>row:last-of-type {
background: #1f1f1f;
display: flex;
justify-content: center;
}
footer>row:last-of-type>p,
footer>row:last-of-type>p>a {
font-family: 'Open Sans', sans-serif;
}
footer>row:last-of-type>p {
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0;
color: #747475;
font-size: 11px;
}
footer>row:last-of-type>p>a {
color: #a5a5a5;
text-decoration: none;
}
footer>row:last-of-type>p>a:hover {
color: #fff;
text-decoration: none;
}

Answer 1

Since you're overriding the normal Bootstap row with flexbox, use the appropriate flexbox alignment..
footer > row
{
display: flex;
align-items: flex-start;
padding: 30px 5%;
}
https://codepen.io/anon/pen/peqKbj