It seems like there may be a simple oversight in my code, as I'm unable to make my Bootstrap grid responsive. I have successfully passed item data through Node and am able to display a grid of item thumbnails with captions in rows of 4. However, when I resize the page, the images just shrink instead of breaking into rows of 2 items and eventually one item as the screen width decreases, as intended with the col-sm-6. What could be causing this issue?
<div class="row text-center" style="display:flex; flex-wrap:wrap">
<% items.forEach(function(item){ %>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="<%= item.image %>">
<div class="caption">
<h4><%= item.name %> </h4>
</div>
</div>
</div>
<% }); %>
</div>
</div>