Bootstrap 4 order nested columns - html

Question

I have a problem that the order-[num] is not working because of the left and right side in different col's
Screenshot of view
<section class="row justify-content-center">
<div class="col-md-11">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-12 mb-3 order-0">
order small 1
</div>
<div class="col-12 mb-3 order-2">
order small 3
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-12 mb-3 order-1">
Ordering as small 2
</div>
<div class="col-lg-6 mb-3 order-3">
ordering as small 4
</div>
<div class="col-lg-6 mb-3 order-4">
ordering as small 5
</div>
</div>
</div>
</div>
</div>
</section>
if I placed all col's in one row it created a big white space of the height of place 2

Answer 1

I can only think of a solution which duplicates the section 3, puts its copy between 2 and the row of 4 and 5, and show/hide section 3 and its copy based on the break point.
HTML
<div class="container">
<div class="row">
<div class="col-md-5">
<section class="mb-3">
1
</section>
<section class="mb-3 d-none d-md-block">
3
</section>
</div>
<div class="col-md-7">
<section class="mb-3">
2
</section>
<section class="mb-3 d-md-none">
copy of 3
</section>
<div class="row">
<div class="col">
<section class="mb-3">
4
</section>
</div>
<div class="col">
<section class="mb-3">
5
</section>
</div>
</div>
</div>
</div>
</div>
Result
On large screens:
On small screens:
fiddle: http://jsfiddle.net/59x0s17k/1/