in Bootstrap col-xs-12 is not ocupying 100% width because the display: flex; property

Question

I needed to vertical align the image from the left in my site which uses bootstrap. I found a solution here everything is okay but when I resize to xs screens the property col-xs-12 shares space with the other column and is not taking the 100% width. How should I make it respect the given space provided?

Answer 1

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .vertical-align {
        display: flex;
        align-items: center;
    }
}

I didnt read carefully here