Bootstrap columns shrink instead of stacking - html

Question

On my landing page, we have a "Media Resource" section with links to videos, support materials and social media. Currently, the content in the section shrinks when the window is resized rather than the wanted outcome of stacking.
To be clear, the Videos, Support, and Social are what should be stacking. The heading of the section is perfectly fine.
I've looked through the HTML and CSS for the section but can't seem to pinpoint what's causing them not to stack like desired. Below is the HTML and CSS for what's being worked on.
HTML
<div class="container-fluid no-gutters media-resource-wrapper">
<div class="row">
<div class="col-12 col-lg-4 text-center">
<h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
</div>
<div class="col-3 col-lg-2">
<img src="~/Images/Video.png" alt="videos" class="img-fluid media-icon video" />
</div>
<div class="col-6 col-lg-4">
<img src="~/Images/Materials.png" alt="support materials" class="img-fluid" />
</div>
<div class="col-3 col-lg-2">
<img src="~/Images/Social.png" alt="social" class="img-fluid media-icon social" />
</div>
</div>
</div>
CSS
.media-resource-wrapper {
background-color: #00b9f2;
padding: 60px 0;
}
.media-resource-wrapper > .row {
margin: 0 10px;
}
.media-resource-wrapper h2 {
margin-bottom: 30px;
color: #fff;
font-weight: bold;
n-bottom: 30px;
color: #fff;
font-weight: bold;
}
/* Media resourse icon positioning */
.media-resource-wrapper .media-icon {
position: relative;
top: 20px;
}
#media (min-width: 992px) {
.health-professionals-block .boxheader-landing {
left: 30px;
margin-top: 250px;
width: 20%;
}
.boxheader-landing h1, .boxheader-landing h2 {
font-size: 1.75em;
}
.boxheader-landing-copy {
font-size: .9em;
}
.media-resource-wrapper h2 {
margin-top: 40px;
border-right: 1px solid #fff;
padding-right: 30px;
}
.media-resource-wrapper .media-icon {
top: 30px;
}
.media-resource-wrapper {
padding: 60px 0 60px 0;
}
}
UPDATE
I made a change that was recommended but the images below shows how it looks by default and then when I shrink.
Standard Size:
Smaller window:

Answer 1

Use standard bootstrap class col-sm-3 and col-sm-6.
Replace the URL with your image and it will stack.
.media-resource-wrapper {
background-color: #00b9f2;
padding: 60px 0;
}
.media-resource-wrapper>.row {
margin: 0 10px;
}
.media-resource-wrapper h2 {
margin-bottom: 30px;
color: #fff;
font-weight: bold;
n-bottom: 30px;
color: #fff;
font-weight: bold;
}
/* Media resourse icon positioning */
.media-resource-wrapper .media-icon {
position: relative;
top: 20px;
}
#media (min-width: 992px) {
.health-professionals-block .boxheader-landing {
left: 30px;
margin-top: 250px;
width: 20%;
}
.boxheader-landing h1,
.boxheader-landing h2 {
font-size: 1.75em;
}
.boxheader-landing-copy {
font-size: .9em;
}
.media-resource-wrapper h2 {
margin-top: 40px;
border-right: 1px solid #fff;
padding-right: 30px;
}
.media-resource-wrapper .media-icon {
top: 30px;
}
.media-resource-wrapper {
padding: 60px 0 60px 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid no-gutters media-resource-wrapper">
<div class="row">
<div class="col-sm-12 col-lg-4 text-center">
<h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
</div>
<div class="col-sm-3 col-lg-2">
<img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="videos" class="img-fluid media-icon video" />
</div>
<div class="col-sm-6 col-lg-4">
<img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="support materials" class="img-fluid" />
</div>
<div class="col-sm-3 col-lg-2">
<img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="social" class="img-fluid media-icon social" />
</div>
</div>
</div>

Answer 2

<div class="container-fluid no-gutters media-resource-wrapper">
<div class="row">
<div class="col-12 text-center">
<h2 class="boxheader-lead">Media & Public Relations Resource
Center</h2>
</div>
</div>
<div class="row">
<div class="col-3 ">
<img src="~/Images/Video.png" alt="videos" class="img-fluid media-
icon video" />
</div>
<div class="col-6 ">
<img src="~/Images/Materials.png" alt="support materials"
class="img-fluid" />
</div>
<div class="col-3 ">
<img src="~/Images/Social.png" alt="social" class="img-fluid
media-icon social" />
</div>
</div>

Answer 3

If you want the columns to stack use col-sm- instead...
https://www.codeply.com/go/kQHOYSTEnL
<div class="container-fluid no-gutters media-resource-wrapper">
<div class="row">
<div class="col-12 col-lg-4 text-center">
<h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
</div>
<div class="col-sm-3 col-lg-2">
<img src="//placehold.it/200" alt="videos" class="img-fluid media-icon video" />
</div>
<div class="col-sm-6 col-lg-4 text-center">
<img src="//placehold.it/200" alt="support materials" class="img-fluid" />
</div>
<div class="col-sm-3 col-lg-2">
<img src="//placehold.it/200" alt="social" class="img-fluid media-icon social" />
</div>
</div>
</div>
As you can see here, the .col- is the smallest breakpoint, so they will continue to shrink horizontally in width. sm is the next size up so they will become full-width, and stack vertically at 576px. If you want the cols to stack at wider widths use col-md-,col-lg- or col-xl-, etc..

Answer 4

<div class="container-fluid no-gutters media-resource-wrapper">
<div class="row">
<div class="col-12 text-center">
<h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
</div>
<div class="col-3 ">
<img src="~/Images/Video.png" alt="videos" class="img-fluid media-icon video" />
</div>
<div class="col-6 ">
<img src="~/Images/Materials.png" alt="support materials" class="img-fluid" />
</div>
<div class="col-3 ">
<img src="~/Images/Social.png" alt="social" class="img-fluid media-icon social" />
</div>
</div>