在末尾对齐boostrap div

Question

我正在使用Bootstrap 4在小型网站上工作，我想将红色框与绿色框最后对齐，因为您可以看到这是我的代码：

<div class="content">
<div class="row">
<div class="col-md-4 col-sm-6 mb-4">
  <div class="card h-50" style="background-color:#ff0000;">
    Test card content. 
  </div>
  <div class="card h-50" style="background-color:#ff0000;">
    Test card content. 
  </div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
  <div class="card h" style="background-color:#00ff00;">
    Test card content. Test card content. Test card content.<br><br><br> Test card content. 
    <br><br><br> Test card content. 
    <br><br><br> Test card content. 
    <br><br><br> Test card content. 

  </div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
  <div class="card h-50" style="background-color:#ff0000;">
    Test card content. 
  </div>
  <div class="card h-50" style="background-color:#ff0000;">
    Test card content. 
  </div>
</div>

这是屏幕截图：

Answer 1

您应该使用flexbox，此链接对您有好处： https://www.w3schools.com/css/css3_flexbox.asp https://css-tricks.com/snippets/css/a-guide-to-flexbox/

align-items:stretch