html - 将 div 对齐到另一个 div 的底部

Question

我试图仅对齐社交媒体(instagram/facebook)，以便它们都位于同一行，同时保持未知高度的色 block (因为这些是响应式 Logo )原样(彼此垂直集中)。

关于如何做到这一点有什么意见吗？我也在使用 Twitter Bootstrap 。

在此先感谢您提供的任何帮助。

jsfiddle

HTML

<div class="row logoLocation vertical-align">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 kite vcenter">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 kiteSocialMedia">
              Facebook/Instagram
            </div>    
        </div>

         <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 supermarket vcenter">                  
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 supermarketSocialMedia">
                Facebook/Instagram
              </div>
          </div>

          <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 koskos vcenter">
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 koskosSocialMedia">
            Facebook/Instagram
              </div>
          </div>
 </div> <!--row -->

CSS

.vertical-align{
  display:flex;
  align-items:center;
}

.kite{
  width:200px;
  height:200px;
  background-color:red;
  float:left;
}

.supermarket{
   width:150px;
  height:150px;
  background-color:blue;
  float:left;
}

.koskos{
  width:175px;
  height:400px;
  background-color:green;
  float:left;
}

Answer 1

如果你想让一些元素在同一行，你必须划分行。

<div class="row">
   <div class="col-md-6">
   // Elements
   </div>

   <div class="col-md-6">
   // Elements
   </div>
</div>

可以任意组合划分。比如:4+4+4, 3+3+3+3......=12