[解決済み] bootstrap fluid layout でグリッド要素を最下位に揃えるには？

質問

Twitterのbootstrapを使用して、2列の行を持つフルードレイアウトを持っています。 最初の列には多くのコンテンツがあり、普通にスパンを埋めるようにしたいです。 2番目の列にはボタンといくつかのテキストがあり、1番目の列のセルに相対的に下揃えしたいです。

ここに私が持っているものがあります。

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

以下は私の希望です。

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

最初のスパンを絶対的な高さにし、2番目のスパンをそれに対して相対的に配置するソリューションを見たことがありますが、私のdivの絶対高さを指定する必要がないソリューションが好ましいと思います。 また、同じ効果を得るための方法を完全に考え直すことも歓迎します。 私はこの足場の使い方に固執しているわけではなく、私にとって最も理にかなっていると思ったからです。

このレイアウトをいじくり回すように。

http://jsfiddle.net/ryansturmer/A7buv/3/

どのように解決するのですか？

ご注意ください。 を使用する場合は、Bootstrap 4+のユーザー向けに Christophe の解決策 (をご覧ください（Bootstrap 4ではフレックスボックスが導入され、よりエレガントなCSSのみのソリューションが提供されます）。以下は以前のバージョンのBootstrapでも動作します...

参照 http://jsfiddle.net/jhfrench/bAHfj/ を参照してください。

//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
  var $this = $(this);
  $this.css('margin-top', $this.parent().height() - $this.height())
});

プラス面では

• の精神で Bootstrapの既存のヘルパークラスである の精神で、私はクラス名を pull-down .
• プルダウンされる要素のみがクラス化される必要があります。
• ...異なる要素タイプ (div, span, section, p, など) に対して再利用可能です。
• かなりよくサポートされている（すべての主要なブラウザが margin-top をサポートしている）。

さて、悪いニュースです。

• jQuery が必要です。
• このままではレスポンシブにはなりません。