CSS Div Переустановка блока для нескольких экранов

Question

Так что я пытаюсь создать страницу с двумя боковыми панелями и основной областью статьи. Тем не менее, я хочу, чтобы две боковые панели были перемещены, поэтому сначала они укладываются вертикально рядом с основной областью, а затем, в конце концов, оба движутся ниже нее. Проблема, с которой я сталкиваюсь, я не могу заставить их правильно переупорядочить это.

Три секции слева (рабочий стол/планшет/телефон) - это то, как я хочу. Страницы справа - это то, как оно появляется сейчас. В основном мне нужно 5 для перемещения вверх до 4 и 3 для перемещения около 4/5 для просмотра планшета, а затем 4 для перемещения вниз под 3 для просмотра телефона.

Надеюсь, это имеет смысл? Я использую Dreamweaver, если это помогает/имеет значение. Благодаря!

Clicky to see what I mean!

Answer 1

Это может быть сделано , если известны определенные высот.

Fiddle: http://jsfiddle.net/BramVanroy/Pt7sS/

Высота #contentWrap и #sideRight нужно знать, чтобы сделать эту работу. Если они неизвестны, вы можете получить высоту через jQuery.

html, body, #header1, #header2, #contentWrap { 
    width: 100% 
} 

#header1 { 
    background: red; 
    height: 50px 
} 

#header2 { 
    background: green; 
    height: 40px 
} 

#sideLeft, #main, #sideRight { 
    box-sizing: border-box; 
    float: left; 
    height: 200px 
} 

#sideLeft, #sideRight { 
    width: 20%; 
    background: #333 
} 

#main { 
    background: grey; 
    width: 60% 
} 

@media screen and (max-width: 768px) { 
    #main { 
     float: right; 
     width: 65% 
    } 

    #sideRight { 
     clear: left 
    } 

    #sideRight, #sideLeft { 
     width: 35%; 
     height: 100px 
    } 
} 

@media screen and (max-width: 480px) { 

    #sideLeft, #main, #sideRight { 
     float: none; 
     width: 100%; 
     position: absolute 
    } 

    #contentWrap { 
     position: relative; 
     height: 400px 
    } 

    #main { 
     top: 0 
    } 

    #sideLeft { 
     bottom: 100px 
    } 

    #sideRight { 
     bottom: 0 
    } 
} 
​