Bootstrap 3 breakpoints not working w/ Rain/Tpl - php

Question

I'm trying to display the Instagram feed on a website, but the column breakpoint is not working.
When in a small device all the columns on the other sections stacks like they are supposed to, but for this part the feed part it is no stacking. They still side by side even in a small screen device.
I didn't do any customization for the bootstrap.
The custom css for the images is listed below.
I'm suspecting that my css is interfering with it somehow, but i didn't find a solution. Can you help me?
<div class="container">
<div class="row" id="instagram-feed">
{loop="$feed"}
<div class="col-md-4 col-sm-12 instagram-image">
<a
href="{$value.permalink}"
target="_blank"
style="background-image: url('{$value.media_url}')"
></a>
</div>
{/loop}
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 gallery-link" >
<p>
xpto
<a
href="https://www.instagram.com/xpto/"
target="_blank"
rel="noopener noreferrer"
>instagram</a
>
</p>
</div>
</div>
</div>
i'm using rain/tpl to loop the values.
Rendered result:
<div class="col-md-4 col-sm-12 instagram-image">
<a
href="https://www.instagram.com/p/Ce3K0vtqwWg/"
target="_blank"
rel="noopener"
style="
background-image: url('https://scontent-frx5-1.cdninstagram.com/v/t51.2885-15/288042510_360927436108874_1443195410220397807_n.jpg?_nc_cat=106&ccb=1-7&_nc_sid=8ae9d6&_nc_ohc=BcBzX46rui8AX9LhNfW&_nc_ht=scontent-frx5-1.cdninstagram.com&edm=ANQ71j8EAAAA&oh=00_AT-UQWOTJQXMvRivbpb7IAutNaT6D2_1ws1WdzhSNMARWA&oe=62B4FE5D');"
>
</a>
</div>
The css i added for this part:
.instagram-image a:before {
content: "";
display: flex;
font-family: "Font Awesome 5 Brands";
font-size: 50px;
color: var(--primary);
background-color: #73a2a9;
opacity: 0;
text-align: center;
transition: all 0.5s;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.instagram-image a:hover:before {
opacity: 0.5;
}
#instagram-feed {
width: 100%;
float: left;
display: flex;
justify-content: space-around;
}