Как получить правую боковую панель вверх по основному содержимому при изменении размера с помощью страницы?

Question

У меня есть страница с основным содержанием и правой боковой панелью. Но я хочу иметь боковую панель перед основным блоком контента при изменении размера страницы. Как я могу это сделать?

HTML часть:

<div id="header"> 
    <div id="logo"></div> 
</div> 

<div id="container"> 

    <div id="content"> 
     main content 
    </div> 

    <div id="sidebar"> 
     sidebar 
    </div>    

</div> 

<div id="footer"> 
    footer 
</div> 

CSS часть:

#container { 
    clear: both; 
    overflow: auto; 
} 

#content { 
    clear:both; 
    width: 70%; 
    float: left; 
    padding: 2% 0; 
    margin-right: 2%; 
} 

#sidebar { 
    width: 28%; 
    float: right; 
    padding: 2% 0; 
} 

Answer 1

Поскольку вы пытаетесь сделать отзывчивый дизайн, то, что вы хотите сделать, - это медиа-запрос в вашем CSS, который позволит вам стилизировать изменения, которые вы хотите сделать. Первое решение, которое вы должны сделать, - это размеры экрана, которые вы хотите отобразить в ответном дизайне. Таблетки обычно имеют максимальную ширину 760 пикселей, а телефоны составляют максимальную ширину 480 пикселей. Таким образом, запрос СМИ будет выглядеть примерно так:

CSS:

@media screen and (max-width: 480px){ 
    ...all your mobile styles are in here... 
} 

Теперь, чтобы ответить на вопросы позиционирования у вас есть. Конечно, есть несколько способов, так как я бы это сделал - это переместить боковую панель над содержимым в HTML, удалить clear из содержимого CSS, а внутри медиа-запроса все, что вам нужно сделать, это сделать ширину для обе divs 100%.

HTML:

<div id="header"> 
    <div id="logo">The logo</div> 
</div> 

<div id="container"> 

    <div id="sidebar"> 
     sidebar 
    </div> 

    <div id="content"> 
     main content 
    </div> 
</div> 

<div id="footer"> 
    footer 
</div> 

CSS:

#container { 
    clear: both; 
    overflow: auto; 
} 

#content { 
    float:left; 
    width: 50%; 
    background:grey; 
} 

#sidebar { 
    width: 25%; 
    float:right; 
    background:lightgrey; 
} 
@media screen and (max-width:480px){ 
    #sidebar { 
     width:100%; 
    } 
    #content { 
     width:100%; 
    } 
} 

Answer 2

В мультимедийном запросе плавать ваш #sidebar налево и ваш #content правильно.