Html 如何使用Bootstrap 4使我的布局具有响应性

我的网格系统如下所示：

A1
A2
A3
A4
A5
B

由于Bootstraps4使用Flex Box，您可以尝试以下方法：

<div class="container" style="margin-top: 25px">
   <div class="row">
    <div class="col-md-8 col-sm-12">
      <div class="row">
        <div class="col-12" style="border: 1px solid black">A1</div>
        <div class="col-12" style="border: 1px solid black">A2</div>
        <div class="col-12" style="border: 1px solid black">A3</div>     
      </div>   
    </div>
    <div class="col-md-4 col-sm-12">
      <div class="row" style="height: 100%">
        <div class="col-12" style="border: 1px solid black; height: 100%">B</div>
      </div>
    </div>
    <div class="col-md-8 col-sm-12">
      <div class="row">
        <div class="col-12" style="border: 1px solid black">A4</div>
        <div class="col-12" style="border: 1px solid black">A5</div> 
      </div
    </div>
  </div>
</div>

A1
A2
A3
B
A4
A5
我发现这种方法可以更清晰地阅读html。但是，根据用例的不同，可能有很多方法来实现这些结果

<style>

@media (min-width: 768px){
    .special-col{
        position: absolute;
        right: 0;
    }

}
</style>

<div class="container" style="margin-top: 25px">
  <div class="row">

    <div class="col-12">
      <div class="row">
        <div class="col-md-8" style="border: 1px solid black">A1</div>
        <div class="col-md-8" style="border: 1px solid black">A2</div>
        <div class="col-md-8" style="border: 1px solid black">A3</div>
        <div class="col-md-4 special-col" style="border: 1px solid black;height:100%;">B</div>    
        <div class="col-md-8" style="border: 1px solid black">A4</div>
        <div class="col-md-8" style="border: 1px solid black">A5</div>
      </div>
    </div>



  </div>
</div>


@介质（最小宽度：768px）{
特别上校{
位置：绝对位置；
右：0；
}
}
A1
A2
A3
B
A4
A5
哦，谢谢。我当然了解固定高度。我只是举个例子。