Как выровнять на flex по линии?

Есть такая конструкция:

<div class="row no-gutters">
    <div class="col-12 col-md-4">
        <p class="text-center text-uppercase">Заявка по телефону или через сайт</p>    
        <div class="adv-stage-one">
            <img src="assets/img/stage-one.png" alt="Заявка по телефону или через сайт" />
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="adv-stage-two">
              <img src="assets/img/stage-two.png" alt="Выезд на объект" />
        </div>   
        <p class="text-center text-uppercase">Выезд на объект</p> 
    </div>
    <div class="col-12 col-md-4">
        <p class="text-center text-uppercase">Заключение договора на разработку и реализацию проекта</p>    
        <div class="adv-stage-three">
            <img src="assets/img/stage-three.png" alt="Заключение договора на разработку и реализацию проекта" />
        </div>                
    </div>
</div>

https://jsfiddle.net/denism300/jk6feLrt/1/ картинки одинакового размера, количество строк текста разное. если к классу .row добавить класс .align-items-baseline, то все выровняется по базису, но относительно текста. А как выровнять по базису относительно всего? т.е. мне нужно, чтобы и картинки и текст были прижаты к условной горизонтальной линии.