Отзывчивый div collapsing

Question

У меня есть отзывчивый дизайн веб-сайта, над которым я работаю, и мне нужно выяснить, как сделать три divs обрушения на основе медиа-запроса. Вот что я пытаюсь сделать:

Размер экрана 1000 пикселей или больше: Три разделителя по центру на той же линии, где левый div (rotatorLeft) равен 25%, средний div (CenterRotator) равен 50% правый div (rotatorRight) равен 25%.

Размер экрана менее 1000px: Три divs по-прежнему центрированы, но я хочу левый и правый divs (rotatorLeft & rotatorRight), чтобы опуститься ниже среднего div.

Проблема, с которой я сталкиваюсь, заключается в том, как сделать div1 wrap на следующую строку. Единственный способ, которым я могу думать, чтобы это произошло, - написать скрипт jQuery, чтобы изменить порядок элементов div в фактическом html, но я бы предпочел не делать этого.

Вот 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%; } 
}