Как двигаться Вправо влево div над левым содержимым div

Question

У меня есть два divs, основное левое содержимое и справа. С медиа-запросом (по мере того, как экран становится меньше), я хочу, чтобы левый контент div был перемещен вниз и позволял право в сторону div двигаться над ним.

Вот что я в настоящее время ...

HTML:

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

CSS:

#content { 
    color:white; 
    width:70%; 
    background: #111; height: 100px; 
    position:inline; 
    float:left;} 

    #aside { 
    float: right; 
    background: #CCC; height: 100px;width: 100px;} 

    @media screen and (max-width: 500px){ 
    #content { 
    width: 100%; 
    margin-left: 0px; 
    clear: both; 
    }} 

Смотрите здесь: https://jsfiddle.net/kaveman71/n55444ca/1/

В настоящее время, когда размер меньше по размеру, сторонний div перемещается ниже содержимого div (в обычном порядке), но я хочу, чтобы произошло наоборот; в сторону div должен двигаться выше (не буквально поверх) левого содержимого div.

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

Есть ли способ сделать это с помощью CSS? Или мне нужно прибегнуть к JavaScript? Если JS - единственный способ, может ли кто-нибудь представить пример?

Спасибо,

к

Answer 1

Если вы меняете порядок дивы, так как их положение при полноэкранном режиме определяется CSS, он должен поместить в стороне над содержанием на изменение размера.

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

Answer 2

Первое, что приходит на ум, состоит в том, чтобы отложить в сторону сначала в порядке содержимого HTML.

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

По умолчанию, в стороне будет находиться содержимое div.

Затем, с помощью запроса средств массовой информации, вы можете поместить содержимое в слева от в сторону, используя что-то вроде:

@media (min-width: 500px) { 
    #content { 
     float: left; 
     width: 70%; 
    } 
    #aside { 
     float: right; 
     width: 100px 
    } 

}