Bootstrap 4 responsive two columns into one column stacked, not shuffled

Question

Using Bootstrap v4 and have two columns splitting the container in half. Each column contains several items and display correctly on larger screens. However, the typical behavior of Bootstrap is to shuffle column 2 items into column 1 when displayed on smaller screens.

The desired effect I want is to stack column 2 items under (or after) all column 1 items, not shuffle them together. I've created this JSfiddle to help explain my desired result.

Any help is greatly appreciated. Cheers

.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

Here is the updated code:

<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>

You want to separate column A's from Column B's. That is why you need put them inside different columns. So I have added two columns with col-md-6 class so they will be stacked side by side. And inside them I have put your child columns that you would like to show under each other.

Answer 2

Are you want like this ?

.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>