Started to learn Bootstrap 4 and the responsive grid system. The code below is my html. When resizing my window, the columns all work perfectly until I reach the xs screensize and all columns automatically span 12 instead of the 4-4-4 like I have tried to do. Tried searching online but can't seem to find an answer anywhere. Help appreciated. I have added my closing html tag, it just isn't showing for some reason.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-8 col-md-12 col-lg-4 box1">1</div>
<div class="col-xs-4 col-sm-2 col-md-6 col-lg-4 box2">2</div>
<div class="col-xs-4 col-sm-2 col-md-6 col-lg-4 box3">3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper
.min.js" integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.
js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>In the bootstrap 4 there are no col-xs, instead of it you need to put a col-4 https://getbootstrap.com/docs/4.0/layout/grid/