Twitter bootstrap TwitterBootstrap 3-网格设计-四处移动列/行

看这个例子

我试图让“文件”和“其他东西”落在“通话详情”之下，而不触及“账户详情”，就像这样

|--------------|-----------------|
|CALL DETAILS  | ACCOUNT DETAILS |
|1             |1                |
|2             |2                |
|--------------|3                |
|FILES         |-----------------|
|1             |
|--------------|
|SOMETHING ELSE|
|--------------|

|---------------|
|CALL DETAILS   |
|1              |
|2              |
|---------------|
|ACCOUNT DETAILS|
|1              |
|2              |
|3              |
|---------------|
|FILES          |
|1              |
|---------------|
|SOMETHING ELSE |
|---------------|

但我也希望它们都以“row-xs-12”的方式彼此折叠，但以特定的顺序排列；呼叫详细信息，帐户详细信息，文件，其他信息。。。像这样,

|--------------|-----------------|
|CALL DETAILS  | ACCOUNT DETAILS |
|1             |1                |
|2             |2                |
|--------------|3                |
|FILES         |-----------------|
|1             |
|--------------|
|SOMETHING ELSE|
|--------------|

|---------------|
|CALL DETAILS   |
|1              |
|2              |
|---------------|
|ACCOUNT DETAILS|
|1              |
|2              |
|3              |
|---------------|
|FILES          |
|1              |
|---------------|
|SOMETHING ELSE |
|---------------|

---

有人能帮我把列和行弄对吗？

类似的东西，非常具体（如果你想让内容稍微居中一点，你可能需要添加一些偏移）：

通话详情

帐户详细信息

档案

别的

您可以使用媒体查询仅在较大屏幕上浮动“帐户详细信息”

@media (min-width:768px) {
  .pull-right-md {
    float:right;
  }
}

注意：即将推出的引导程序4将包括（即：

pull md right

）这种行为，这样您就不需要定制CSS类：

HTML:

通话详情
文件夹
别的
帐户详细信息

JS:

var accountDetails=$（'.account details'），
AccountDetailsAgent=accountDetails.parent（），
callDetails=$（'.callDetails'）；
$（窗口）。调整大小（函数（）{
if（$（this）.width（）<768）{
callDetails.after（accountDetails）；
}否则{
accountDetailsParent.append（accountDetails）
}
});
$（window.trigger（'resize'）；

---

根据这里的图片，你的小提琴做的正是你想做的。我想@Ridai希望“文件”列在“通话详情”下向上滑动。这在fiddle中没有发生。@Skelly这是我在OP fiddle中看到的使用FF的情况，所以是的OP fiddle已经在帐户下滑动文件了details@dippas抱歉，我应该提到浏览器的大小应该是最大的，这正是我想要实现的。