html - 强制文本停留在列 bootstrap 3的底部

我有一个问题，我希望li留在底部，而不是顶部
这是我的代码

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
              <p>lorem ipsum</p>
              <h2>lorem ipsum</h2>
            </div>
            <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
              <div class="row">
                <div class="detil">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                  <li>Lorem ipsum.</li>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                  <li>Lorem ipsum.</li>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                  <li>Lorem ipsum.</li>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                  <li>Lorem ipsum.</li>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                  <li>Lorem ipsum.</li>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                  <li>Lorem ipsum.</li>
                </div>
               </div>
              </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
              <h2>10</h2>
              <p>Lorem ipsum.</p>
            </div>
          </div>

的CSS

h2,p{
  margin-top:0;
  margin-bottom:0;
}

http://codepen.io/vicario/pen/eZJpov
如您所见，我的列表排在最前面，我如何使其排在最下面？

最佳答案

修复错误

我只需要添加这样的课程

    .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

并将detil设置为

.detil {
  position: absolute;
  bottom: 0;
}