How to align content which is placed in different columns?

[waschingmachine]

Hello dear community,

please consider this running example:

--> Example <--

Code for the example:

<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

[Disconnected]

Hi machine, welcome to the site, there really isnt a community, just me trying to answer questions x.x

So you want the buttons to always be aligned, sounds pretty easy enough

Style:

.con_head{
margin:0;	
width:100%;
height:45px;
text-align: center;	
background-color:#999;
padding:8px 0px 0px 0px;
}
.con{
margin:0;
width:100%;
height:100px;
background-color:#e8e8e8;	
text-align: center;
padding: 10px 10px 10px 10px;
}
.btn_styler{
width:100%;
height:45px;	
border:0;
border-radius:0;
background-color:#FF8000;	
}

script:

<div>
  <div class="text-center">
    <div class="row">
      <div class="col-sm-3">
        <h3 class="con_head">xxxxxxxxxxx</h3>
        <h4 class="con">xxxxxxxxxxxxxx xxxxxxxxxx</h4>
        <button type="button" class="btn btn_styler btn-lg">xx</button>
      </div>
      <div class="col-sm-3">
        <h3 class="con_head">xxxxxxxxxxxxxxxx</h3>
        <h4 class="con">xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxx xxxxx</h4>
        <button type="button" class="btn btn_styler btn-lg">xx</button>
      </div>
      <div class="col-sm-3">
        <h3 class="con_head">xxxx x</h3>
        <h4 class="con">xx</h4>
        <button type="button" class="btn btn_styler btn-lg">xx</button>
      </div>
      <div class="col-sm-3">
        <h3 class="con_head">xxxxx</h3>
        <h4 class="con">xx x</h4>
        <button type="button" class="btn btn_styler btn-lg">xx</button>
      </div>
    </div>
    
  </div>  
</div>

[waschingmachine]

Hi machine, welcome to the site, there really isnt a community, just me trying to answer questions x.x

Thanks a lot Disconnected, I really appreciate your help!

Here is a running example of your solution: -->example<--

Please consider how it looks like if the window is not at full width:



In the second heading "xxxxxxxxxxxxxx xxxxxxxxxx" you can see the space which is used for aligning the buttons at the full-width-view.
However, this space is not really necessary in this small-width-view. I wouldn't mind in this example, but if I fill this example with real content, for one columns there is a first heading ("yyy .. yyy") which spans two lines, therefore I have to to increase the height for ".con_head". Then in this small-width-view this does not look good, since there is a lot of spacing between each "row" / first heading as well.

Therefore I would like to ask if it somehow possible to achieve that if the columns are no longer next to each other, to ignore all space (or here: heigths) (only introduced to fix the full-width-view).

I hope I could make myself understood

[waschingmachine]

I think I managed to reset the height attribute with media queries accordingly

[Disconnected]

That example was specifically for desktop users, i should have mentioned that as i posted it, i typically take facebooks approach and make a mobile site separate from the actual site (m.sitename.com)
But it was just an example to show you how you can level the buttons is all :P