Размер изображения на планшете не изменяется должным образом

Question

У меня в основном есть набор из 3-х изображений, на настольном и мобильном устройствах они выглядят нормально и меняют размер в соответствии с размером экрана, но на планшете у меня возникают проблемы, вместо того, чтобы уменьшать и складывать изображения друг на друга, в основном это просто кадрирование половина изображения, вот код, который я использую. Я предполагаю, что это как-то связано с моим классом div? Используется bootstrap 4

<div class="row">
    <div class="col-sm-4 m-b-20">
        <a href="/">
        <div class="thumb-overlay">
            <img src="/media/categories/video/2.jpg">
            <div class="category-title m-t-5">
                <a class="btn btn-primary" href="/"><span class="hidden-xs"><b></b></span><span class="visible-xs"></span></a>
            </div>
        </div>              
        </a>
        </div>
    <div class="col-sm-4 m-b-20">
        <a href="/">
        <div class="thumb-overlay">
            <img src="/media/categories/video/3.jpg">
            <div class="category-title m-t-5">
                <a class="btn btn-primary" href="/"><span class="hidden-xs"><b></b></span><span class="visible-xs"></span></a>
            </div>                          
        </div>
        </a>
        </div>
    <div class="col-sm-4 m-b-20">
        <a href="">
        <div class="thumb-overlay">
            <img src="/media/categories/video/10.jpg">
            <div class="category-title m-t-5">
                <a class="btn btn-primary" href="/"><span class="hidden-xs"><b></b></span><span class="visible-xs"></span></a>
            </div>                          
        </div>
        </a>
    </div>