How to make responsive three columns in a row with image text and link using Bootstrap 4?

I am struggling with the setting three responsive columns in a row using 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>

The problem is when media screen width is smaller than 767px, they are going to the left. I want to make image in the middle of column, the beginning of the text should be at the beginning of the imaeg and the end of text at the end of image, button should be at the beginning of the image too like here:

enter image description here

Solution

Just add width:100% to your images so they take all the space on the column

.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>