向上移动 div 以填充 Bootstrap 3 布局中的空白空间答案

【问题标题】：Shift div upward to fill empty space in Bootstrap 3 layout向上移动 div 以填充 Bootstrap 3 布局中的空白空间
【发布时间】：2015-07-03 05:18:16
【问题描述】：

我有一个Bootstrap 布局，当它以xs 的最小媒体查询大小进入 1 列时，它会按照我想要的方式重新排序：

[A]
[B]
[IMG]
[C]
[D]
[E]

在更大的屏幕尺寸下，我希望它看起来像这样：

[A][IMG]
[B][E]
[C]
[D]

相反，它目前看起来像这样：

[A]
[B][IMG]
[C]
[D][E]

这是demo。

如何使图像和右侧的 div 向上“浮动”以填充空白空间？

【问题讨论】：

【解决方案1】：

那么你应该按那个顺序排列你的列。

像这样：

[A], [IMG], [B], [E], [C], [D]

您当前的订单是：

[A], [B], [IMG], [C], [D], [E]

查看更新后的CodePen。

我知道移动布局的顺序会有所不同，但您不能仅使用 CSS 重新排列 DOM 元素

【讨论】：

【解决方案2】：

你需要一点js来在顺序中上下移动列...

if ($(window).width() > 767) {
       $("#img").insertBefore("#b");
       $("#e").insertBefore("#c");
    }

注意：您必须在每次调整窗口大小后重新加载小提琴，如果您针对的是设备，这很好，但如果您希望它也对浏览器调整大小做出反应，您将需要稍微复杂一点的 js。

就像@zgood 所说，您需要以移动 div 顺序为基础。

【讨论】：