在断点更改bootstrap3中列的顺序

Question

我正在尝试建立一些注册公式，目前由3组元素组成。

1. 一组输入(蓝色)
2. 复选框+提交按钮(绿色)
3. 更多投入(橙色)

最初，我有两个列布局，蓝色和绿色在左边，橙色是右边的列(如左图所示)。当屏幕变窄时，橙色的盒子会在绿色的盒子下面破掉。但是，由于绿色框包含提交按钮，我更希望在蓝色和绿色框之间有橙色的间隔(某种程度上)，如右图所示。

我试着玩由自助提供的推拉类，但没能得到我想要的。目前我甚至不确定这是否真的有可能。

“最好”的结果只是按蓝色、橙色和绿色顺序将3个盒子按col-md-6顺序推入，但当橙色盒子比蓝色盒子高时，绿色的顶部和橙色盒子的底部对齐。

我真的希望有人对我的行为有一个想法。

​

​

提前感谢！

更新：在我看来，这个问题不是How can I "wrap" divs with Twitter Bootstrap 3?的重复

我将设法提供一个关于我目前情况的更好的样本。

我目前的情况类似于这个代码：http://codepen.io/anon/pen/ObNXxr，我使用了与框中的图像相同的边框颜色。

对于窄屏幕而言，这具有所需的行为，但在较宽的屏幕上，绿色框的顶部边框与橙色框的底部边框位于同一条线上。但是我想要绿色的盒子就在蓝色的盒子下面，如图中左边的图画所示。

更新->应答

不幸的是，我不能把这作为答案，因为这个问题被错误地结束为重复。

我找到了解决办法。您可以在这里看到一个更新代码：http://codepen.io/anon/pen/rWMmvZ

我通过添加一个

@media ( min-width : 992px) {
    .register .right-panel {
        float: right;
    }
}

并将register类添加到row div上，并在面板上添加了right-panel类，该类应该在右侧(橙色的)可见。这允许绿色框在大视口的蓝色下方移动，并在较小的屏幕上在蓝色和绿色之间拍摄橙色。

Answer 1

解决方案1 :

body { padding-top: 50px; }
.content {
  background-color: #eee;
  border: 1px dashed #ccc;
  padding: 50px;
  text-align: center;
}

body::before {
  content: "xs";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  background-color: #000;
  color: #fff;
}
@media (min-width : 768px) { 
  body::before { 
    content: "sm"; 
  }
}
@media (min-width : 992px) { 
  body::before { 
    content: "md"; 
  }
}
@media (min-width : 1200px) { 
  body::before { 
    content: "lg"; 
  }
}

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-push-6">
      <div class="content">
        <h1>Column A</h1>
      </div>
    </div>
    <div class="col-sm-6 col-sm-pull-6">
      <div class="content">
        <h1>Column B</h1>
      </div>
    </div>
  </div>
</div>

​

这可能会有帮助..。注释:浏览器中的Ckeckout .

解决方案2 :

在css中添加以下代码：

.col-md-push-6 {
left: 50%;
}

.col-md-pull-6 {
right: 50%;
}

请看下面这个片段：

​

body { padding-top: 50px; }
.content {
  background-color: #eee;
  border: 1px dashed #ccc;
  padding: 50px;
  text-align: center;
}

body::before {
  content: "xs";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  background-color: #000;
  color: #fff;
}
.col-md-push-6 {
left: 50%;
}
 
.col-md-pull-6 {
right: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-push-6">
      <div class="content">
        <h1>Column A</h1>
      </div>
    </div>
    <div class="col-sm-6 col-sm-pull-6">
      <div class="content">
        <h1>Column B</h1>
      </div>
    </div>
  </div>
</div>

​