Как сделать мой макет адаптивным с помощью Bootstrap 4

Question

У меня есть следующая Grid-система, которая выглядит следующим образом:

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

    <div class="col-8">
      <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 class="col-12" style="border: 1px solid black">A4</div>
        <div class="col-12" style="border: 1px solid black">A5</div>
      </div>
    </div>

    <div class="col-4">
      <div class="row" style="height: 100%">
        <div class="col-12" style="border: 1px solid black; height: 100%">B</div>
      </div>
    </div>

  </div>
</div>

https://codepen.io/slava4ka/pen/QWWwOax

Как мы можем сделать так, чтобы при уменьшении размера зоны видимости до .col-sm- сетка выглядела так:

Answer 1

Я считаю этот способ немного чище читать 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>

Answer 2

Поскольку 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>

Однако вашему элементу B потребуется фиксированная высота, иначе он будет таким же высоким, как и другие