放置在特定的div一個div通過ID

我有以下HTML佈局，其中id爲在div =圖表是使用id =信息框在div下面：放置在特定的div一個div通過ID

<div id="infobox"></div> 
<div id="chart"></div>

在移動版本，我想重新-arrange他們反之亦然，即信息框將是下圖：

<div id="chart"></div> 
<div id="infobox"></div>

唯一的解決辦法我能想出是建立在不同的容器兩種佈局：

<div id="desktopContainer"> 
    <div id="infobox"></div> 
    <div id="chart"></div> 
</div> 
<div id="mobileContainer"> 
    <div id="chart"></div> 
    <div id="infobox"></div> 
</div>

並在CSS文件中，應用以下規則：

@media (max-width :768px) { 
    #desktopContainer { 
     display: none 
    } 
} 

@media (min-width :768px) { 
    #mobileContainer { 
     display: none 
    } 
}

然而，這些div實際上是非常人口稠密的元素，這是創造一個非常骯髒的代碼。有沒有辦法通過指定其ID或清潔解決方案將div放在另一個div下？

注意：它也應該在IE9中工作。

來源

2016-03-15 Faruk Yazıcı

首先，你爲什麼想這樣做？ –

由於移動設備體積小，首先要注意的應該是圖表。然而桌面很大，一切都可以按照邏輯順序進行，因爲它們都能吸引注意力。 –

使用FlexBox和'訂單'。簡單。 –

只有一個#container同時擁有<div>s。實際上，你可以使用FlexBox和使用order屬性是這樣的：

#container { 
    display: flex; 
} 

@media (max-width :768px) { 
    #container div:first-child { 
    order: 2; 
    } 
} 

@media (min-width :768px) { 
    #container div:first-child { 
    order: 1; 
    } 
}

order property:

的CSS order屬性指定用於佈置在其柔性容器彎曲項目的順序。元素按訂單價值的升序排列。具有相同順序值的元素按其在源代碼中的顯示順序排列。

上面的代碼是非常通用的，因爲它使用#container和:first-child，這樣你就可以根據自己的需要自行馴服它。讓我知道你是否需要進一步的幫助。

更多信息：A Complete Guide to Flexbox通過CSS技巧。

來源

2016-03-15 11:44:09

我試過這個解決方案。在我的問題中，我只展示了兩個div。信息框和圖表。實際上有5個div。當我發出命令：2時，信息框將跳過所有div並進入頁面底部。 –

@FarukYazıcı我特意給你一個鏈接，瞭解'訂單'的工作原理。我知道你有更多的div。訂購就像訂購。最低排名第一，最高排名最後。希望你明白。 –

這是一個很好的解決方案，但我讀到flexbox在IE9中不起作用。我正在更新我的問題。 –

放置在特定的div一個div通過ID

回答

相關問題