Bootstrap flex-column-reverse pushes column to new line - vue.js

Question

I want to have my web layout setup like this on MD and larger:
img - content
content - img
But on a smaller screen I want the content to come first and then the image, like so:
content
img
I can do this with this line of code on my row where the row is img-content:
flex-column-reverse flex-md-row
But all of this is dependent also on how I order the HTML, I am using vue components, so I dont want to change my html order, it might add too much complexity
So I keep the HTML order consistent.
This is my code:
<div class="row p-5 flex-column-reverse flex-md-row">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title ">lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>
// Next row
<div class="row p-5 flex-column-reverse ">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title "> lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>
here is the setup in jsfiddle
The reverse class does reverse the order but The problem with this approach is for some odd reason, the next row that should be content-img, the image gets pushed to the next line.
Anyone got any idea why and how to have it not push to the new line?

Answer 1

A little bit of back n-forth found out the solution.
flex-column-reverse
-is a vertical reverseŕ,thus its always pushing it to the new line, so having it be the only one on it, our row doesn't know to change on a larger size so we add this:
flex-md-row-reverse
note the row in it, since we are setting it, horizontally

Answer 2

If you want content / image – content / image on small screens, then you should set the order that way. Then, to have the content and images switch place on larger screens, add order-md-first to the even lines.
I’ve modified the code from your Fiddle:
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title ">Title 1</h2>
<p class="about-p text-muted">Desc 1</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper">
<h2>MY IMAGE1</h2>
</div>
</div>
// Next row
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title "> Title 2</h2>
<p class="about-p text-muted">Desc 2</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper order-md-first">
<h2>MY IMAGE2</h2>
</div>
</div>
</div>