ブートストラップ列の下部にdivを整える

Question

bootstrap colを使用している最中にdiv要素を親要素の一番下に揃える方法はありますか？

.wrapper { 
 
    background-color: green; 
 
    height: 200px; 
 
} 
 

 
.bottom { 
 
    position: relative; 
 
} 
 

 
.bottom-div { 
 
    height: 200px; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div class="wrapper"> 
 
    <div class="col-md-3 bottom"> 
 
    <div class="bottom-div"> TEST1 </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    TEST2 
 
    </div> 
 
    <div class="col-md-3"> 
 
    TEST3 
 
    </div> 
 
</div>

底div要素は、底部に整列しません。これを行う正しい方法は何ですか？ありがとう。

UPDATE：Div要素ラッパーを使い果たした（それは基本的に上に移動）

Answer 1

ないあなたがやろうとしている正確に何をしてください、@CBroeはフレキシボックスが最善の方法であるが、これをしようと言ったように： -

/* CSS used here will be applied after bootstrap.css */ 
 
.wrapper{ 
 
    background-color:green; 
 
    height: 200px; 
 
    position: relative; 
 
    
 
} 
 
    
 
.bottom-div{ 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
    bottom:0; 
 
    left: 0; 
 
    background-color: red; 
 
} 
 

 
.testclass { 
 
    height: 100%; 
 
} 
 

 

 

<div class="wrapper"> 
 
    <div class="col-md-3 testclass"> 
 
    <div class="bottom-div"> TEST1 </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    TEST2 
 
    </div> 
 
    <div class="col-md-3"> 
 
    TEST3 
 
    </div> 
 
</div>