Привести бутстрэп-колл к предыдущему ряду с другой точкой останова?

Question

Я просматривал документацию Bootstrap по Grid - возможно, я что-то упустил, но не могу найти способ сделать это.

У меня есть строка с тремя столбцами (col-lg-4 для каждого) - я хочу реорганизовать это в два столбца с точкой останова col-md (col-md-6), но в итоге я получаю пустое место к третьему элементу col (поскольку строка содержит три элемента col).

Я включил инфографику, чтобы проиллюстрировать, что я имею в виду.

Есть ли способ (родной для начальной загрузки), который доставит содержимое из следующего ряда, чтобы заполнить это пустое пространство?

Answer 1

Ваши объяснения верны, но кажется, что ваша HTML-структура делает что-то не так.

Я создал рабочую скрипку , чтобы вы показали одно возможное решение. Вот бегущий код:

.row {
  margin-top: 20px;
}

.col-lg-4 {
  padding: 10px;
}

.inside-col {
  background: #aaa;
  color: #fff;
  text-align: center;
  padding: 100px 50px;
  min-height: 200px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="inside-col">
        col-md-4 col-lg-6
      </div> 
    </div>
  </div> 
</div>