Bootstrap 4 responsive reordering fill space

Question

I'm trying to get a certain responsive behaviour in Bootstrap 4, I would like one column to take up the right section with the two other cols stacked left of it on larger screens but on a smaller screen it needs to be between the two sections.

I have tried the following 2 html layouts but either the blue div pushes the green one down the page as in example one or the blue and green are inline under the red as in example 2.

Bootply of both examples.

Example 1

<div class="row">
  <div class="col-12 col-md-7">RED</div>
  <div class="col-12 col-md-5">BLUE</div>
  <div class="col-12 col-md-7">GREEN</div>
</div>

Example 2

<div class="row">
  <div class="col-12 order-1 col-md-7">RED</div>
  <div class="col-12 order-3 order-md-2 col-md-7">GREEN</div>
  <div class="col-12 order-2 order-md-3 col-md-5">BLUE</div>
</div>

Desired desktop layout

Desired mobile layout

Answer 1

You want something like this ? I've tried with Bootstrap 4 scripts and it works fine !

@media screen and (max-width:768px){
  .red{
    order:1;
  }
  .blue{
    order:3;
  }
  .green{
    order:2
  }
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="row">
  <div class="col-12 col-md-7 red">RED</div>
  <div class="col-12 col-md-5 blue">BLUE</div>
  <div class="col-12 col-md-7 green">GREEN</div>
</div>