bootstrap で縦方向の調整でbottom で表示したいのですが、うまくいきません

bootstrapでコンテンツの垂直方向の調整をbottom にしようとしていますが、うまく表示されません。

    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-8 hidden-xs dtable">
        <h2 class="pad dec bottom">情報</h2>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs">
        <img src="/image/photo.jpg" class="img-responsive img-circle" />
      </div>
    </div>

「情報」というテキストを左寄寄せのbottom で表示したいのですが、
上手くいきません。

CSSは

.dtable{
  display: table;
}

.bottom{
  display: table-cell;
  vertical-align: bottom;
}

どこがおかしいでしょうか？
ご教授頂けると嬉しいです。
宜しくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

.dtable の要素に高さが無いから下に行きません。高さを追加するか、flex で処理するとかどうでしょう。

HTML
1    <div class="row ftable">
2      <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 ftable">
3        <h2 class="pad dec bottom">情報</h2>
4      </div>
5      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
6        <img src="//placehold.jp/24/cc9999/993333/350x750.png" class="img-responsive img-circle" />
7      </div>
8    </div>

CSS
1.ftable {
2    display: flex;
3}
4.bottom {
5	align-self: flex-end;
6}
7```**動くサンプル：**[https://jsfiddle.net/dprzkc8L/](https://jsfiddle.net/dprzkc8L/)
8
9---
10
11【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
12[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html)