html - 响应式 div 折叠

Question

我正在设计一个响应式网站，我需要弄清楚如何根据媒体查询折叠三个 div。这是我正在尝试做的事情:

屏幕尺寸 1000 像素或更大: 页面居中的三个div在同一行，左边div(rotatorLeft)占25%，中间div(CenterRotator)占50%，右边div(rotatorRight)占25%。

屏幕尺寸小于 1000 像素: 三个 div 仍然居中，但我希望左右 div (rotatorLeft & rotatorRight) 下降到中间 div 以下。

我遇到的问题是弄清楚如何使 div1 换行到下一行。我能想到的唯一方法是编写一些 jQuery 脚本来更改实际 html 中 div 元素的顺序，但我不想这样做。

这是我的 html:

<div id="rotators">
<div id="rotatorLeft">
<img class="RotatorImage" src="/images/Showcase.png">
</div>
<div id="CenterRotator">
<img class="RotatorImage" src="/images/MainRotator.png">
</div>
<div id="rotatorRight">
<img class="RotatorImage" src="/images/DYK.png">
</div>
</div>

和 CSS:

#rotators {
width: 100%;
margin: 10px auto;
height: 390px;
max-width:1320px;
}

#rotatorLeft {
width: 25%;
float: left;
}

#CenterRotator {
width: 50%;
float: left;
}

#rotatorRight {
width: 25%;
float: left;
}

.RotatorImage {
width: 100%;
} 

有什么建议吗？

Answer 1

这可能很难实现，因为不同的布局意味着文档中的元素顺序不同。如果您想更改设计以在左侧显示主要 (50%) div，那将非常简单:

<div id="rotators">
    <div id="CenterRotator"></div>
    <div id="rotatorLeft"></div>
    <div id="rotatorRight"></div>
</div>

#rotators {margin: 10px auto; }
#rotators > div {height: 200px; float: left; }

#rotatorLeft {width: 25%; background: #eee;  }
#CenterRotator {width: 50%; background: #ddd; }
#rotatorRight {width: 25%; background: #ccc; }

@media only screen and (max-width: 1000px) {
    #rotators > div {float: none; width: 100%; }
}

如果您完全融入了设计，那么如果您有固定的高度并使用绝对定位，就可以实现它。

#rotators {margin: 10px auto; position: relative; }
#rotators > div {height: 200px; position: absolute; top: 0; }

#CenterRotator {width: 50%; left: 25%; background: #ddd; }
#rotatorLeft {width: 25%; left: 0; background: #eee;  }
#rotatorRight {width: 25%; left: 75%; background: #ccc; }

@media only screen and (max-width: 1000px) {
    #rotators > div {position: static; width: 100%; }
}