Javascript 任意切换DOM元素位置

我正在建立一个响应迅速的网站，在不同的视窗宽度下查看时，可以任意改变小部件的位置

从视觉上看，它的转折点是：

为此：

我的第一种方法是通过以下方式设置占位符div元素：

<div data-change-from=".my-element"></div>

使用jQuery来检测宽度和移动元素，但是使用复杂的网格和更多的小部件，它变得难以管理

什么是一种高效可靠的方法？

使用CSS 它很棒，做所有的事情

body { position: relative }
body:after {
    content: '';
    display: block;
    clear: both;
}
#one, #two, #three, #four, #five, #six {
    height: 40px;
    background: #aaa;
    margin: 8px 1%;
    float: right;
}
#one-two {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45%;
}
#one, #two { width: 100% }
#three, #four, #five, #six {
    float: left;
    width: 100%;
}
#five, #six { width: 50% }
@media screen and (min-width: 1000px) {
    #one-two {
        position: static;
        display: inline;
    }
    #one, #three, #five {
        width: 60%;
        float: left;
    }
    #two, #four, #six {
        width: 35%;
        float: right;
    }
}

只需要一个额外的容器：

<div id="one-two">
    <div id="two">2</div>
    <div id="one">1</div>
</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>

2.
1.
3.
4.
5.
6.

---

基本上，我有一个默认样式，除非在媒体查询中被覆盖

（最小宽度：1000px）

。这将通过调整浮动、宽度来重新排列元素，如果是

#one

和

#two

，则应用

位置：绝对

（将其移动到底部）。当窗口足够大时，媒体查询会覆盖形成漂亮简单网格的样式。

有没有想过同位素（链接）或砖石（链接），它们都会做这种事情注意图像上的颜色。相同的颜色框实际上是相同的html元素。