Bootstrap 4 columns not stacking when screen is resized [duplicate] - css

Question

This question already has answers here:
Bootstrap columns stacking vertically on mobile device
(2 answers)
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 4 years ago.
I can't seem to get my head around why the divs are not stacking on top of each other when I re size the screen.
I'm using col-xs-4 col-md-4 col-lg-4 but the content stays in one row and doesn't even resize.
<div class="container">
<div class="row">
<div class="info">
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="logo-link"><img alt="Spartan Safety Logo" class="img-fluid" src="img/logo.png">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="info-center-1">
<div class="info-center-icon">
<i class="fa fa-phone-square fa-2x"></i>
</div>
<div class="info-center-title">
<h6>Customer Support and Sales</h6>
</div>
<div class="info-center-text">
<p>0208 5275888</p>
</div>
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="info-center-1">
<div class="info-center-icon">
<i class="fa fa-clock-o fa-2x"></i>
</div>
<div class="info-center-title">
<h6>Opening Hours</h6>
</div>
<div class="info-center-text">
<p>Mon - Fri 08:30 - 4:30</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.info {
display: inline-flex;
margin: 20px 0px 10px 0px;
}
.logo-link img {
max-width: 50%;
height: auto;
margin-bottom: 10px;
}
.info-center-1 {
margin-top: 20px;
}
.info-center-icon i {
color: #cccccc;
display: inline-flex;
}
.info-center-title {
margin-bottom: px;
}
.info-center-title h6 {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 22px;
text-transform: uppercase;
display: inline-flex;
}
.info-center-text p {
font-family: 'Open sans', sans-serif;
font-size: 24px;
font-weight: 400;
color: #FF9900;
line-height: 22px;
display: inline-flex;
}

Answer 1

You should not add more divs between .row and .col-. Instead, merge both info and row so you only have one wrapper for the col- divs:
<div class="container">
<div class="row info">
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="logo-link"><img alt="Spartan Safety Logo" class="img-fluid" src="img/logo.png">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="info-center-1">
<div class="info-center-icon">
<i class="fa fa-phone-square fa-2x"></i>
</div>
<div class="info-center-title">
<h6>Customer Support and Sales</h6>
</div>
<div class="info-center-text">
<p>0208 5275888</p>
</div>
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="info-center-1">
<div class="info-center-icon">
<i class="fa fa-clock-o fa-2x"></i>
</div>
<div class="info-center-title">
<h6>Opening Hours</h6>
</div>
<div class="info-center-text">
<p>Mon - Fri 08:30 - 4:30</p>
</div>
</div>
</div>
</div>
Working example: http://jsfiddle.net/aq9Laaew/34182/

Answer 2

If you want a column to take the whole width of the row for a particular screen size then you should specify col-ScreenSize-12. So you should be using col-xs-12 col-md-4 col-lg-4 instead.
And also display: inline-flex; styling on class .info is making the division to be in a single line always, so remove it.