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>

此代码生成以下内容：

我需要在同一行中移动 IMAGE 部分的 PURCHASE 部分。

我正在尝试使用推/拉，但此解决方案在不同的行中不起作用。

Working Example

更新

我首先尝试使用Mobile。

移动版（可以）

其他设备： 我需要整理列而不重复代码。

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

Answer 1

由于以下原因，不能重复这样做是不可能的：

来自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列，因此将放置新行。

新行中的下一个元素，即使执行pull-8也无法跳过＆＃34;跳过＆＃34;到上一行

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

Answer 2

每行最多为12个col单位。当然如果你有2个大小为8的col加上你正在推动第二个4个单位，那么PURCHASE将不会与IMAGEN相同。

Answer 3

代码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 4

你没有使用bootstrap的力量。我做了一个简单的演示，让你弄明白。您可以尝试以下代码：

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

可以找到演示here