Hello dear community,

please consider this running example:

--> Example <--

Code for the example:
Code:
<div>
  <div class="text-center">

    <div class="row">
      <div class="col-sm-3">
        <h3>xxxxxxxxxxx</h3>
        <h4>xxxxxxxxxxxxxx xxxxxxxxxx</h4>
        <button type="button" class="btn btn-default btn-lg">xx</button>
      </div>
      <div class="col-sm-3">
        <h3>xxxxxxxxxxxxxxxx</h3>
        <h4>xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxx xxxxx</h4>
        <button type="button" class="btn btn-default btn-lg">xx</button>
      </div>
      <div class="col-sm-3">
        <h3>xxxx x</h3>
        <h4>xx</h4>
        <button type="button" class="btn btn-default btn-lg">xx</button>
      </div>
      <div class="col-sm-3">
        <h3>xxxxx</h3>
        <h4>xx x</h4>
        <button type="button" class="btn btn-default btn-lg">xx</button>
      </div>
    </div>
    
  </div>  
</div>
If you widen the output window far enough, you will see four columns next to each other.
I would like that the buttons, across the different columns, are aligned to each other, meaning that they are all on the same height (aligned to the button which is at deepest). How can this be achieved?
It works if I put them in a new row, but then, if the window width gets smaller and everything is reordered, the buttons are not below the text they belong to!

It would be great if you could help me
Best regards
waschingmachine