Выровнять столбцы и их содержимое, используя Bootstrap 3

Question

Я новичок в этом, поэтому, пожалуйста, подождите.

Я пытаюсь создать макет, используя одну строку, содержащую 3 столбца, в которых есть текст, кнопка и изображение. При просмотре на меньших экранах текст сдвигает кнопку и изображение не совмещается с двумя другими в строке из-за разницы в объеме текста, как показано на скриншоте ниже.

https://i.stack.imgur.com/lYl7r.jpg

Я хочу, чтобы кнопки и изображение были выровнены на экране любого размера. Я подумал о том, чтобы поместить их в отдельную строку, но на экранах телефонов это будет складывать 3 блока текста друг над другом, а затем стопку из 3 изображений.

Какие-нибудь решения? Вот мой код на данный момент.

<div class="row">
<div class="col-lg-4">
<p><img alt="" data-picture-align="center" data-picture-mapping="std_opt_img" height="250" src="https://mayflex.com/sites/default/files/product_labelling.png" width="250" /></p>

<h3 class="rtecenter"><strong>Bespoke Product Labelling</strong></h3>

<p>For a&nbsp;professional finishing&nbsp;touch, our product labelling services allow you to tailor products&nbsp;to your project requirements.&nbsp;</p>

<ul>
    <li>Professional&nbsp;labelling&nbsp;from the moment of&nbsp;installation</li>
    <li>Save valuable time on-site</li>
    <li>Fade proof acrylic for&nbsp;long term quality and reliability</li>
</ul>

<p><a class="btn btn-primary" href="https://mayflex.com/node/10566">Find out more</a></p>

<p><img alt="" class="img-responsive" data-picture-mapping="std_opt_img" height="150" src="https://mayflex.com/sites/default/files/labelling_images.jpg" width="750" /></p>
</div>

<div class="col-lg-4">
<p><img alt="" data-picture-align="center" data-picture-mapping="std_opt_img" height="250" src="https://mayflex.com/sites/default/files/pre_term_copper.png" width="250" /></p>

<h3 class="rtecenter"><strong>Pre-Terminated Copper Assemblies</strong></h3>

<p>With 'plug and play' functionality you can&nbsp;save&nbsp;both time and&nbsp;cost&nbsp;on your copper installations.</p>

<ul>
    <li>Maximises cable usage</li>
    <li>Environmentally friendly - reduces waste onsite</li>
    <li>Fully tested and fully traceable</li>
</ul>

<p><a class="btn btn-primary" href="https://mayflex.com/node/9595">Find out more</a></p>

<p><img alt="" class="img-responsive" data-picture-mapping="std_opt_img" height="150" src="https://mayflex.com/sites/default/files/pre-term_copper_images.jpg" width="750" /></p>
</div>

<div class="col-lg-4">
<p><img alt="" data-picture-align="center" data-picture-mapping="std_opt_img" height="250" src="https://mayflex.com/sites/default/files/pre_term_fibre.png" width="250" /></p>

<h3 class="rtecenter"><strong>Pre-Terminated Fibre&nbsp;Assemblies</strong></h3>

<p>For maximum efficiency during fibre installations, opt for one of&nbsp;our pre-terminated fibre offerings.</p>

<ul>
    <li>Bespoke lengths to suit your application</li>
    <li>Quality-checked to ensure best performance</li>
    <li>Available in a variety of core counts</li>
</ul>

<p><a class="btn btn-primary" href="https://mayflex.com/node/9596">Find out more</a></p>

<p><img alt="" class="img-responsive" data-picture-mapping="std_opt_img" height="150" src="https://mayflex.com/sites/default/files/pre-term_fibre_images.jpg" width="750" /></p>
</div>

<p>&nbsp;</p>

<p>&nbsp;</p>
</div>

Спасибо