Responsive Flexbox Example

example.html

<div class="container">
    <div class="image">
        <img src="http://placetokyo.com/100/100" alt="" />
    </div>
    <div class="name-location">
        <div class="name">This be the name</div>
        <div class="location">This be the location</div>
    </div>
    <div class="buttons">
        <a href="#">Button</a>
        <a href="#">Second button</a>
    </div>
</div>

responsive-flex.css

.container {
    border: 1px solid rebeccapurple;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.image {
    border: 1px solid gold;
    width: 100px;
    flex: 0 0 100px;
}

.image img {
    display: block;
}

.name-location {
    border: 1px solid hotpink;
    flex: 1 1 auto;
}

.buttons {
    border: 1px solid orangered;
}

@media screen and (max-width: 600px) {
    .container {
        border-width: 2px;
        flex-wrap: wrap;
    }

    .buttons {
        padding: 40px 0;
         flex: 1 100%;   
    }
}