任意切換DOM元素的位置

Question

我正在構建一個響應式網站，可以在不同的視口寬度中查看時任意更改窗口小部件的位置。

從外觀上看，它把這個：

進入這個：

我的第一種方法以這種方式設置佔位符div元素：

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

和使用response.js來檢測寬度並使用jQuery移動元素，但使用複雜的網格和更多的小部件變得難以管理。

什麼是高效可靠的方法？

Answer 1

使用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> 

http://jsfiddle.net/nce9b/

基本上我有，除非在媒體查詢(min-width: 1000px)覆蓋多數民衆贊成應用默認樣式。這通過調整浮點數和寬度來重新排列元素，並且在#one和#two應用position: absolute（將其移動到底部）的情況下重新排列元素。當窗口足夠大時，媒體查詢會覆蓋樣式，形成一個很好的簡單網格。