Responsive layout ordering with Bootstrap 4

I have a page with a Bootstrap layout like this:

<div class="row">
   <div class="col-md-6">
       content
   </div>
   <div class="col-md-6">
       content A
       content B
   </div>
</div>

so that on larger screens, it looks like this:-

-----------------------
| content | content A |
|         | content B |
-----------------------

but on smaller screens, it looks like this:-

-------------
| content   |
| content A |
| content B |
-------------

How would I go about making that "content A" section appear at the very top on small screens, like this:-

-------------
| content A |
| content   |
| content B |
-------------

whilst keeping the larger version the same as above?