1

У меня есть такая bootstrap сетка:

<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- сетка выглядела так: рисунок сетки

1 ответ 1

1

.container {
  position: relative;
}

.b {
  height: 100%;
  position: absolute !important;
  right: 0;
}

@media (max-width: 767px) {
  .b {
    position: static !important;
    height: 100px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="margin-top: 25px">
      <div class="row">
        <div class="col-12 col-sm-8" style="border: 1px solid black">A12</div>
        <div class="col-12 col-sm-8" style="border: 1px solid black">A2</div>
        <div class="col-12 col-sm-8" style="border: 1px solid black">A3</div>
        <div class="col-12 col-sm-4 b" style="border: 1px solid black;">B</div>
        <div class="col-12 col-sm-8" style="border: 1px solid black">A4</div>
        <div class="col-12 col-sm-8" style="border: 1px solid black">A5</div>        
      </div>   
     </div>
     

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.