放置在特定的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

回答

相关问题