Как правильно и адаптивно верстать?

<div class="col-md-3">   
                <div class="gallery-container">
                    <img src="images/tours/germany.jpg">
                    <div class="bgtools">
                        <a>Город</a>
                        <a>2 ночей</a>
                    </div>
                </div>
                </div>

.gallery-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}


.bgtools{
    position: absolute; 
    bottom: 0; 
    left 0; 
    right: 0;
    background: #fff;
    padding: 10px;
    width: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0.4;
}

.thumbnail{
background-image: url("...");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}