Позиционирование дивы с помощью CSS

Question

Я работаю на Отзывчивый макет для различных размеров экрана и иметь HTML структуру, как показано ниже:

<div id="top"> 
    some text 1 
</div> 
<div id="middle"> 
    some text 2 
</div> 
<div id="bottom"> 
    some text 3 
</div> 

и CSS, как показано ниже:

/*Responsive Layout Style Start */ 
/*STRUCTURE*/ 

#top { 
    width: 220px; 
    float: left; 
    padding: 5px 8px 5px 8px; 
    margin-left: 8px; 
    background: #EFF5F8; 
} 

#middle { 
    width: 452px; 
    float: left; 
    padding: 5px 8px; 
    margin: 0px 5px 5px 5px; 
} 

#bottom { 
    width: 220px; 
    padding: 5px 5px; 
    float: left; 
     background: #EFF5F8; 
} 

/*MEDIA QUERIES*/ 
/* for 980px or less */ 
@media screen and (max-width: 980px) { 
    #top { 
     width: 40%; 

    } 
    #middle { 
     width: 55%; 
     padding: 5px 5px; 
     float: right; 
    } 

    #bottom { 
     clear: both; 
     padding: 1% 2%; 
     width: auto; 
     float: none; 
    } 
} 

/* for 900px or less */ 
@media screen and (max-width: 900px) { 
    #content { 
     width: 39%; 
    } 
    #middle { 
     width: 55%; 
     padding: 5px 5px; 
     float: right; 
    } 

    #bottom { 
     clear: both; 
     width: auto; 
     float: none; 
    } 
} 

/* for 800px or less */ 
@media screen and (max-width: 800px) { 
    #top { 
     width: 33%; 
    } 
    #middle { 
     width: 59%; 
     padding: 5px 5px; 
     float: right; 
    } 

    #bottom { 
     clear: both; 
     width: auto; 
     float: none; 
    } 

} 

/* for 600px or less */ 
@media screen and (max-width: 600px) { 
    #top { 
     width: auto; 
     float: none; 
    } 

    #middle { 
     width: auto; 
     padding: 5px 10px; 
     float: right; 
     margin: 0px 5px 5px 5px; 
    } 

    #bottom { 
     width: auto; 
     float: none; 
    }   
} 

/* for 480px or less */ 
@media screen and (max-width: 480px) { 

    h1 { 
     font-size: 24px; 
    } 
} 

/* border & guideline */ 
#top { 
    background: #f8f8f8; 
} 
#bottom { 
    background: #f0efef; 
} 

img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
} 
/*Responsive Layout Style End */ 

для 600px или меньше. Я хочу, чтобы раздел «средний» отображался сверху, а затем разделы «сверху» и «внизу»

Я пробовал различные варианты из google ничего не помогал.

Любая идея была бы очень полезной.

Answer 1

Вы можете положить скрытыйdiv, который будет displayed на требуемые размеры экрана.

Пример -

HTML

<div id="middle_hidden"> 
    some text 2 
</div> 
<div id="top"> 
    some text 1 
</div> 
<div id="middle"> 
    some text 2 
</div> 
<div id="bottom"> 
    some text 3 
</div> 

CSS

.... 

#middle_hidden { 
    display:none; 
} 

.... 

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

    .... 

    #middle { 
     .... 
     display:none; 
    } 

    #middle_hidden { 
     display:block; 
    } 

} 

JSFiddle.