我有一個Bootstrap佈局重新排序本身我想要的方式，當它變爲1列在xs最小媒體查詢大小，以填補空白：移位的div向上引導3佈局
[A]
[B]
[IMG]
[C]
[D]
[E]
在更高的屏幕尺寸，我希望它看起來像這樣：
[A][IMG]
[B][E]
[C]
[D]
相反，它目前看起來是這樣的：
[A]
[B][IMG]
[C]
[D][E]
這是demo。
如何讓圖像和右邊的「浮動」向上填充空白空間？
然後你應該把你的列順序。
像這樣：
[A], [IMG], [B], [E], [C], [D]
您當前的順序是：
[A], [B], [IMG], [C], [D], [E]
查看更新CodePen。
我知道移動佈局則是按不同的順序，但你不能只用CSS重新安排DOM元素
當它對齊到一列時，它給了我錯誤的順序。 – Keyslinger
@Keyslinger查看我更新的答案。 – zgood
您正在嘗試根據屏幕大小以不同的順序重新排列「col-'div」。這對於CSS來說是不可能的。你可能想要改進你的佈局 – zgood
你需要一點點JS對訂單中上下移動列...
if ($(window).width() > 767) {
$("#img").insertBefore("#b");
$("#e").insertBefore("#c");
}
https://jsfiddle.net/w46wbf9y/1/
注意：您需要重新加載每個窗口大小調整，如果你的目標設備是經過精細的小提琴，但如果你希望它在瀏覽器中調整過的反應，你」我需要稍微複雜的js。
就像@zgood說的，你需要以移動div訂單爲基礎。
我接受的並非純粹的CSS和HTML解決方案 – Keyslinger