Ordering does not work on Bootstrap 4 - css

Question

I want to different order on Desktop and on mobile,
Currently this is the order
On Med+ :
On small:
Desktop is good. This is the right position.
On mobile I want the picture to come below the button and the test.
I have tried order-sm-fist and order-sm-last and also order-1 until order-2 but nothing seems to change. Not sure what I am doing wrong:
<section class="feature section">
<div class="container">
<div class="row">
<div class="heading">
<h2>Try it now!</h2>
</div>
<div class="col-md-5 order-md-last">
<img src="The image url is here"
class="" id="generated-monKey" alt="">
</div>
<div class="col md-2 order-md-1">
<br>
</div>
<div class="col-md-5 order-md-first text-center">
<p>Enter a Banano wallet address and press the "Generate monKey" button.</p>
<br>
<p>If you do not have a Banano wallet you can create one in BananoVault or simply generate a random Banano
wallet address.</p>
<br>
<div class="container">
<input type="text" class="form-control form-rounded" placeholder="Banano Address" maxlength="64" size="65">
<br>
<div class="container">
<div class="row">
<form>
<div class="checkbox col-md-6">
<label>
<input type="checkbox" value="" checked>Accessories</label>
</div>
<div class="checkbox col-md-6">
<label>
<input type="checkbox" value="" checked>Background</label>
</div>
</form>
</div>
</div>
</div>
<br>
<button type="button" class="btn btn-lg btn-success form-rounded" border>Generate monKey</button>
<br>
<br> Monkeys are perfect for avatars. Click on the monKey image in order to download it.
</div>
</div>
</div>
</section>
In this example I changed the md to first and last which means even on Desktop I should see the image on the right and the text on the left and yet nothing changes.

Answer 1

Your HTML structure is so messy. Here are my 2 cents:
No nested container
cols should come right after row.
What's up with the missing - on col md-2? And why do you need a column wrapping a <br>?
Cleaned up HTML structure
<section class="feature section">
<div class="container">
<div class="heading"></div>
<div class="row">
<div class="col-md-6">
<form />
</div>
<div class="col-md-6 order-md-first">
<img />
</div>
</div>
</div>
</section>
fiddle: http://jsfiddle.net/aq9Laaew/144878/