Как установить обтекание колонки в bootstrap 4

Question

-> как установить столбец в адаптивном представлении этого типа структуры.я хочу один за другим столбец у меня есть скриншот вложения, что я хочу в начальной загрузке 4 для просмотра Ipad.я хочу один столбец, чем второй столбец.

@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');[![enter image description here][1]][1]
body {
  font-size: 15px;
  line-height: 28px;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;            
}
.video-thumb .video-icon {
  width: 35px;
  height: 35px;
  background-color: rgba(0,0,0,.9);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;    
}
.thumbnail-main, .video-content {
  margin-bottom: 20px;
}
img {
  max-width: 100%;
}
.inner-content span {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 12px;          
 }
.inner-content a.link {
  color: #208385;
}
h5 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
section {
  padding: 100px 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-4 thumbnail-main">
        <a href="https://www.google.co.in/">
          <div class="postion-relative">
            <img src="http://placekitten.com/1000/500" alt="">
          </div>
        </a>
      </div>
      <div class="col-md-8 video-content inner-content">
        <span class="date">10 Oct 2018</span>
        <span class="cat-tag">
          <a class="link" href="https://www.google.co.in/">Breast</a>
        </span>
        <a href="https://www.google.co.in/">
          <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
        </a>
      </div>
      <div class="col-md-4 thumbnail-main">
        <a href="https://www.google.co.in/">
          <div class="postion-relative">
            <img src="http://placekitten.com/1000/500" alt="">
          </div>
        </a>
      </div>
      <div class="col-md-8 video-content inner-content">
        <span class="date">10 Oct 2018</span>
        <span class="cat-tag">
          <a class="link" href="https://www.google.co.in/">Breast</a>
        </span>
        <a href="https://www.google.co.in/">
          <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
        </a>
      </div>
    </div>
  </div>
</section>

Answer 1

В столбцах начальной загрузки может быть только 12 столбцов в одной строке, в вашем примере у вас есть 4 элемента div с 4, 8, 4, 8 столбцами.

Вам необходимо сделать следующее:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="row col-md-4 col-lg-12">
          <div class="col-lg-4 thumbnail-main">
          <a href="https://www.google.co.in/">
            <div class="postion-relative">
              <img src="http://placekitten.com/1000/500" alt="">
            </div>
          </a>
        </div>
        <div class="col-lg-8 video-content inner-content">
          <span class="date">10 Oct 2018</span>
          <span class="cat-tag">
            <a class="link" href="https://www.google.co.in/">Breast</a>
          </span>
          <a href="https://www.google.co.in/">
            <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
          </a>
        </div>
      </div>
      <div class="row col-md-4 col-lg-12">
          <div class="col-lg-4 thumbnail-main">
          <a href="https://www.google.co.in/">
            <div class="postion-relative">
              <img src="http://placekitten.com/1000/500" alt="">
            </div>
          </a>
        </div>
        <div class="col-lg-8 video-content inner-content">
          <span class="date">10 Oct 2018</span>
          <span class="cat-tag">
            <a class="link" href="https://www.google.co.in/">Breast</a>
          </span>
          <a href="https://www.google.co.in/">
            <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Я окружил карты в div, который содержит строку с col-md-4 и col-lg-12.Это будет показывать карту на планшете и меньше, но если больше, чем планшет, он будет показывать ее подряд.Не знаю, если это то, что вы имеете в виду, я надеюсь, что это поможет:)!