HTML header rows if screen size is smaller - html

Question

Good day, I am trying to be consistent on the interface aspect of my website. Right now I am trying to make the list in my header become rows if I adjust my screen size to a smaller size. I am stuck in figuring out how to make it into rows if I place multiple links in one div class row. Thanks for any help I can get.
HTML:
<div class="bg-color-white strong">
<div class="container">
<nav>
<div class="row spacer">
<div class="col-md-1">
<div class="logo">
<img src="img/logo_png_solo.png">
</div>
</div>
<div class="col-md-8">
<ul class="list1">
<li>Home</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-3">
Sign Out
<hr>
<ul class="list2">
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
</div>
EDIT: what i want is to have all the links automatically be in a row if the screen size is smaller, if I add lg, md, sm three of my links are still in one row.
JS Fiddle: https://jsfiddle.net/61kc2hjx/

Answer 1

<div class="row">
<div class="col col-12 col-sm-10 col-md-8 col-lg-6 col-xl-4"></div>
</div>
The .col div will have full width by default. But as the screen gets larger, the col width will decrease progressively. JSFiddle
Edit #1 :
<div class="col-12 col-md-8">
<div class="list1 row">
<a class="col col-4 col-md-12">Home</a>
<a class="col col-4 col-md-12">FAQ</a>
<a class="col col-4 col-md-12">Contact</a>
</div>
</div>
JSFiddle
This is what I understood from your explanations. But I hope you get the idea.