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

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 >
  <div >
    <form>
      <div >
        <div >
          <div >
            asd
          </div>
        </div>

        <div >
          <button type="submit">Submit</button>
        </div>
      </div>
    </form>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <form>
      <div >
        <div >
          <div >
            asd
          </div>
        </div>

        <div >
          <button type="submit">Submit</button>
        </div>
      </div>
    </form>
  </div>
</div>

(see here online)