I am looking to rearrange the layout for Desktop and mobile devices, currently this is how it's structured:
On Med+ :
https://i.sstatic.net/E9ZHo.png
On small:
https://i.sstatic.net/VG6j1.png
The placement on Desktop is fine. However, on mobile I want the image to appear below the button and text. I've tried using order-sm-first, order-sm-last, and even order-1 to order-2, but nothing seems to be working. Unsure of what I might be missing:
<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 instance, I used the 'md' tags for first and last to ensure that even on Desktop the image should display on the right and the text on the left, however, the layout remains unchanged.