在响应式布局中将 Bootstrap 3 排序列放入同一行

Question

我正在开发响应式布局，但我无法对列进行排序。

我无法对单行中的列进行排序。

<div class="row">
<div class="well col-sm-8" style="background-color: red">IMAGE col-sm-8</div>
<div class="well col-sm-8 col-sm-push-4" style="background-color: antiquewhite">DESCRIPTION col-sm-8 col-sm-push-4</div>
<div class="well col-sm-4 col-sm-pull-8" style="background-color: aqua">PURCHASE col-sm-4 col-sm-pull-8</div></div>

此代码生成以下内容：

我需要将 PURCHASE 部分移动到同一行中的 IMAGE SECTION。

我正在尝试推/拉，但此解决方案不适用于不同的行。

Working Example

更新

我正在尝试先使用移动设备。

手机版（还可以）

其他设备： 我需要在不重复代码的情况下组织列。

在小型、中型大型设备中，我需要显示以下示例：

Answer 1

每行最多包含 12 个列单位。当然，如果您有 2 个尺寸为 8 的列加上您将第二个推到 4 个单位，那么 PURCHASE 将不适合与 IMAGEN 相同的行。

Answer 2

代码div class="row" 是每一行。 如果要在同一行中创建 PURCHASE 部分，则需要将其添加到与 IMAGEN 部分相同的div class="row" 中。

这是你需要的吗？

<div class="row">
    <div class="well col-sm-8" style="background-color: red">IMAGEN col-sm-8</div>
    <div class="well col-sm-4" style="background-color: aqua">PURCHASE col-sm-4</div>
</div>
<div class="row">
    <div class="well col-sm-8 col-sm-push-4" style="background-color: antiquewhite">DESCRIPTION col-sm-8 col-sm-push-4</div>

</div>

Answer 3

您没有使用引导程序的力量。我做了一个简单的演示让你弄清楚。你可以试试下面的代码：

HTML：

<div class="row">
  <div class="col-sm-12 col-md-4 image">hi</div>
  <div class="col-sm-12 col-md-4 purchase">hi</div>
  <div class="col-sm-12 col-md-4 desc">hi</div>
</div>

CSS：

.image {
  background: #5ccdde;
}

.purchase {
  background: #ff7162;
}

.desc {
  background: #77e38c;
}

Demo可以在here找到

Answer 4

由于以下原因，如果不重复就不可能做到这一点：

来自Bootstrap

如果在一行中放置了超过 12 列，则每组 额外的列将作为一个单元换行。

在你的情况下：

<div class="well col-sm-8" style="background-color: red">IMAGE col-sm-8</div>
<div class="well col-sm-8 col-sm-push-4" style="background-color: antiquewhite">DESCRIPTION col-sm-8 col-sm-push-4</div>

当应用第二个 col-sm-8 时，您有超过 12 列，因此将放置新行。

新行中的下一个元素，即使是拉 8 也无法“跳转”到上一行

<div class="well col-sm-4 col-sm-pull-8" style="background-color: aqua">PURCHASE col-sm-4 col-sm-pull-8</div></div>