交换列只适用于移动版本引导-lg-6

Question

我有一个表单，我从使用bootstrap.min.css col-lg-6的表单中插入了一个片段。

现在，当屏幕宽度很大时，第一列文本将在左边，按钮在右边。

当宽度很小的时候，假设是移动的，那么带有文本的列将位于顶部，按钮将位于底部

我想让事情保持不变的大宽度，文字在左边，按钮在右边。对于移动设备，我希望它是相反的，按钮在顶部，文本在底部。

到目前为止，我唯一的想法是制作2个按钮，并根据屏幕大小隐藏额外的按钮。

但还有别的办法吗？

​

<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

在您的项目中，引导版本3.2是强制性的吗？因为在最新版本的Bootstrap中，您可以使用订单类来执行任务。

我曾经使用过您的代码片段，使用了Bootstrap的Oder类：

<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>

(在线看这里)