Can't align-items in Bootstrap - html

Question

I'm not a good developer since I'm only a student. I'm trying to make a website for me but I can't align-items on my rows in bootstrap. I'm trying to do this:
1 but I'm stuck on this:
<div class="container-fluid">
<div class="row align-items-start">
<div class="col">
<div class="title">
Lorem Ipsum —<br>Interactive Media<br>Designer
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<ul class="link">
<li>About</li>
<li>Work</li>
<li>Experiments</li>
<li>Contact</li>
<li>Instagram</li>
<li>Behance</li>
</ul>
</div>
</div>
<div class="row align-items-end">
<div class="col">
<div class="footer">
All rights reserved© 1998—2019
</div>
</div>
</div>
</div>
Can someone help me?
The items just don't align like i want them to

Answer 1

For this to work you need to put every element in single row. You have 3 rows.
Imagine row like this
Every line represent single row. If you put content in one row element it will be displayed in single line. If you put in more rows content will be displayed in more rows.
So your code should look like this
<div class="container-fluid">
<div class="row align-items-start">
<div class="col">
<div class="title">
Lorem Ipsum —<br>Interactive Media<br>Designer
</div>
</div>
<div class="col">
<ul class="link">
<li>About</li>
<li>Work</li>
<li>Experiments</li>
<li>Contact</li>
<li>Instagram</li>
<li>Behance</li>
</ul>
</div>
<div class="col">
<div class="footer">
All rights reserved© 1998—2019
</div>
</div>
</div>
</div>
If this doesn't help then I didn't understood you correctly so come back here so we can fix it :)
UPDATE
Based on new info I got this should be new solution
<div class="container-fluid top">
<div class="row align-items-start">
<div class="col">
<div class="title">
Lorem Ipsum —<br>Interactive Media<br>Designer
</div>
</div>
</div>
</div>
<div class="container-fluid center">
<div class="row align-items-center">
<div class="col">
<ul class="link">
<li>About</li>
<li>Work</li>
<li>Experiments</li>
<li>Contact</li>
<li>Instagram</li>
<li>Behance</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid bottom">
<div class="row align-items-end">
<div class="col">
<div class="footer">
All rights reserved© 1998—2019
</div>
</div>
</div>
</div>
.top {
position: aboslute;
top: 0;
}
.center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.bottom {
position: absolute;
bottom: 0;
}

Answer 2

align-items property depends on the height row. For this you can set height for row