swap columns only for mobile version bootstrap col-lg-6 - html

Question

I have a form, I inserted a piece from the form where I use bootstrap.min.css col-lg-6
And now when the screen width is large, the first column with text will be on the left, and the button on the right
And when the width is small, let's say for mobile, then the column with the text will be on top, and the button will be on the bottom
I want to make things stay the same for large widths, text on the left, button on the right. And for mobile, I want it to be the other way around, the button is on top, and the text is on the bottom
So far, my only idea is to make 2 buttons, and hide the extra one depending on the screen size
But is there another way to do this?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="row">
<div class="col-md-6">
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
asd
</div>
</div>
<div class="col-lg-6">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>

Answer 1

is the Boostrap version 3.2 mandatory in your project? Because in more recent versions of Bootstrap you could use the Order Classes for your task.
I used your code snippet once, using Bootstrap's Oder Classes:
<div class="row">
<div class="col-md-6">
<form>
<div class="row">
<div class="col-lg-6 order-2 order-md-1">
<div class="form-group">
asd
</div>
</div>
<div class="col-lg-6 order-1 order-md-2">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
(see here online)