When referring to the Bootstrap4 documentation, we find classes like col-*-num and offset-*-num for structuring page layouts. In the code snippet below, the column divisions from sm size and up are consistent, but there is a discrepancy in the layout for the extra small view. To address this issue, I have utilized col-sm-* for small size and above, and col-xs-* for the extra small view. While the layout appears as expected for sizes labeled as small and above, all columns seem to occupy their own row in the extra-small view. This has led me to question my understanding of Bootstrap4 concepts - what could be causing this unexpected behavior?
HTML
<body>
<div id="top-ribbon" class="container-fluid">
<div class="row align-items-center">
<div id="logo" class="col-xs-2 offset-xs-1 col-sm-2 offset-sm-2 d-flex align-items-center justify-content-center color-white">Hello
</div>
<div id="socials" class="col-xs-3 offset-xs-2 col-sm-2 offset-sm-6 d-flex align-items-center justify-content-around color-white">
0256666666<i class="fa fa-phone color-white"></i>
</div>
</div>
</div>
</body>
Css
#top-ribbon{
background-color: rgb(168, 8, 133);
}
#socials i{
font-size: 20px;
}
#socials, #logo{
border: 1px solid;
}
.color-white{
color: white;
}
#top-ribbon1{
background-color: rgb(168, 8, 133);
}
#socials1 i{
font-size: 20px;
}
#socials1, #logo1{
border: 1px solid;
}