Как сделать отзывчивыми три столбца подряд с текстом изображения и ссылкой, используя Bootstrap 4?

Question

Я борюсь с настройкой трех отзывчивых столбцов подряд с помощью Bootstrap 4.

.buttons {
    border: 1px solid #e86225;
    color: #e86225 !important;
    padding: 10px 20px;
    font-size: 14px;
}

.buttons:hover {
    border: 1px solid #ffffff;
    background-color: #e86225;
    color: #ffffff !important;
    transition: background-color 1s, border 1s, color 1s;
}

.container-custom {
    padding-top: 80px;
    padding-bottom: 80px;
}

.custom-link {
    padding: 15px 0;
}

.container p {
    margin: 25px 0;
    max-width: 400px;
}

@media(max-width: 767px){ 

    .container-custom {
        padding-top: 50px;
        padding-bottom: 50px;
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<div class="container">
            <div class="row container-custom justify-content-center">
                <h2>Blog</h2>
                <div class='d-flex flex-wrap pt-5'>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHBMzMRL0g3ELio_DdCRvdajdF812AQPP2AbmM_jYr_66CnwgS" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFsb6TxovKdTNx-8gdo1R01nZXxRRauett2KQ_ci76VgjK2hR7" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                </div>
            </div>

Проблема в том, что когда ширина экрана мультимедиа меньше 767 пикселей, они идут влево. Я хочу сделать изображение в середине столбца, начало текста должно быть в начале изображения, а конец текста в конце изображения, кнопка должна быть в начале изображения, как здесь:

введите описание изображения здесь

Answer 1

Просто добавьте ширину: 100% к изображениям, чтобы они занимали все пространство в столбце

.buttons {
    border: 1px solid #e86225;
    color: #e86225 !important;
    padding: 10px 20px;
    font-size: 14px;
}

.buttons:hover {
    border: 1px solid #ffffff;
    background-color: #e86225;
    color: #ffffff !important;
    transition: background-color 1s, border 1s, color 1s;
}

.container-custom {
    padding-top: 80px;
    padding-bottom: 80px;
}

.custom-link {
    padding: 15px 0;
}

.container p {
    margin: 25px 0;
    max-width: 400px;
}
img{
        width:100%;
}
@media(max-width: 767px){ 

    .container-custom {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<div class="container">
            <div class="row container-custom justify-content-center">
                <h2>Blog</h2>
                <div class='d-flex flex-wrap pt-5'>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHBMzMRL0g3ELio_DdCRvdajdF812AQPP2AbmM_jYr_66CnwgS" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFsb6TxovKdTNx-8gdo1R01nZXxRRauett2KQ_ci76VgjK2hR7" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                </div>
            </div>

Answer 2

Возможно, проблема в ширине изображения. Добавьте img { width: 100%; } и class="img-fluid" к своим img тегам.

Добавить в css:

img { width: 100%; }

HTML:

<img  class="img-fluid" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">

или что-то подобное, чтобы изображения выглядели как макет на прикрепленном изображении.

Пример codepen с использованием вашего кода: https://codepen.io/brooksrelyt/pen/MZdLYj