Bootstrap 4 отзывчивых двух столбца в один столбец, не перетасованный

Question

Использование Bootstrap v4 и две колонки, разделяющие контейнер пополам. Каждый столбец содержит несколько элементов и правильно отображается на больших экранах. Однако типичным поведением Bootstrap является перетасовывание элементов столбца 2 в столбец 1 при отображении на экранах меньшего размера.

Требуемый эффект - складывать элементы столбца 2 под (или после) всеми элементами столбца 1 не тасуйте их вместе. Я создал этот JSfiddle , чтобы объяснить мой желаемый результат.

Любая помощь очень ценится. Ура

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-md-6 {
  border: solid 1px #6c757d;
  padding: 10px;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
    <lable><strong>Normal 2 Column on medium/big screen</strong></lable>
    <div class="row">
        <div class="col-md-6" style="background-color: green; margin-bottom: 15px;">A1</div>
        <div class="col-md-6" style="background-color: yellow; margin-bottom: 15px;">B1</div>
        <div class="col-md-6" style="background-color: green; margin-bottom: 15px;">A2</div>
        <div class="col-md-6" style="background-color: yellow; margin-bottom: 15px;">B2</div>
        <div class="col-md-6" style="background-color: green; margin-bottom: 15px;">A3</div>
    </div>
</div>

<div class="container">
    <lable><strong>Common Responsive 2 Column on small/mobile screen</strong></lable>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A1</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B1</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A2</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B2</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A3</div>
    </div>
</div>

<div class="container">
    <lable><strong>DESIRED Responsive 2 Column on small/mobile screen</strong></lable>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A1</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A2</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A3</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B1</div>
    </div>    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B2</div>
    </div>
</div>

Answer 1

Ты так хочешь?

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-md-6 {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
    <lable><strong>Normal 2 Column on medium/big screen</strong></lable>
    <div class="row">
        <div class="col-6" style="background-color: green; margin-bottom: 15px;">A1</div>
        <div class="col-6" style="background-color: yellow; margin-bottom: 15px;">B1</div>
        <div class="col-6" style="background-color: green; margin-bottom: 15px;">A2</div>
        <div class="col-6" style="background-color: yellow; margin-bottom: 15px;">B2</div>
        <div class="col-6" style="background-color: green; margin-bottom: 15px;">A3</div>
    </div>
</div>

<div class="container">
    <lable><strong>Common Responsive 2 Column on small/mobile screen</strong></lable>
    <div class="row">
        <div class="col" style="background-color: green">A1</div>
    </div>
    <div class="row">
        <div class="col" style="background-color: yellow">B1</div>
    </div>
    <div class="row">
        <div class="col" style="background-color: green">A2</div>
    </div>
    <div class="row">
        <div class="col" style="background-color: yellow">B2</div>
    </div>
    <div class="row">
        <div class="col" style="background-color: green">A3</div>
    </div>
</div>

<div class="container">
    <lable><strong>DESIRED Responsive 2 Column on small/mobile screen</strong></lable>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A1</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A2</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A3</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B1</div>
    </div>    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B2</div>
    </div>
</div>

Answer 2

Вот обновленный код:

<div class="container">
<lable><strong>Normal 2 Column on medium/big screen</strong></lable>
<div class="row">
     <div class="col-md-6">
       <div class="row">
         <div class="col-md-12" style="background-color: green; margin-bottom: 15px;">A1</div>
         <div class="col-md-12" style="background-color: green; margin-bottom: 15px;">A2</div>
         <div class="col-md-12" style="background-color: green; margin-bottom: 15px;">A3</div>
       </div>
     </div>
     <div class="col-md-6">
        <div class="row">
          <div class="col-md-12" style="background-color: yellow; margin-bottom: 15px;">B1</div>
          <div class="col-md-12" style="background-color: yellow; margin-bottom: 15px;">B2</div>
        </div>

     </div>
</div>

Вы хотите отделить столбец A от столбца B. Вот почему вам нужно поместить их в разные столбцы. Поэтому я добавил два столбца с классом col-md-6, чтобы они были сложены рядом. И внутри них я поместил ваши дочерние столбцы, которые вы хотели бы показать друг под другом.