Переместить div в верхнюю часть для небольших экранов

Question

У меня есть макет, который должен выглядеть немного по-другому для ПК-экранов и смартфонов.

Layout 1: 
|1 | 2  | 
|3 | 4 |5 | 
|6 | 7 |8 | 

Layout 2: 
|4| 
|1| 
|2| 
|3| 
|5| 
|6| 
|7| 
|8| 

Вы можете видеть, что в макете 2, DIV (или в данном примере, статья) должно двигаться к вершине, с другими дивами ниже.

Как это сделать, когда мне нравится использовать простой HTML + CSS для этого, нет JS/jQuery ....!?

Fiddle находится прямо здесь: https://jsfiddle.net/SchweizerSchoggi/vsn8nod7/ Зеленый div - тот, который должен сидеть сверху в мобильном макете, так как он содержит текст описания страницы, остальные divs содержат только изображения.

Answer 1

Что я хотел бы предложить, используя сетку бутстрапа, так как это облегчает работу с сетками.

Если вы не хотите использовать загрузчик, вы можете использовать запросы средств массовой информации в вашем CSS, чтобы скрыть или показать DIV в зависимости от размера экрана:

@media screen and (min-width: 400px) { 
    #div4a { 
     display: none; 
    } 
} 
@media screen and (max-width: 399px) { 
    #div4b { 
     display: none; 
    } 
} 

Надеется, что это помогает немного.

Answer 2

Flexbox можно сделать:

Codepen Demo

* { 
 
    box-sizing: border-box; 
 
} 
 
.parent { 
 
    width: 50%; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.child { 
 
    height: 40px; 
 
    line-height: 40px; 
 
    background: pink; 
 
    flex: 0 0 33.33%; 
 
    text-align: center; 
 
    border: 1px solid grey; 
 
    order: 1; 
 
} 
 
.wider { 
 
    flex: 0 0 66.66%; 
 
} 
 
@media (max-width: 600px) { 
 
    .child { 
 
    flex: 0 0 100%; 
 
    } 
 
    .topper { 
 
    order: 0; 
 
    background: orange; 
 
    } 
 
}

<div class="parent"> 
 
    <div class="child">1</div> 
 
    <div class="child wider">2</div> 
 
    <div class="child">3</div> 
 
    <div class="child topper">4</div> 
 
    <div class="child">5</div> 
 
    <div class="child">6</div> 
 
    <div class="child">7</div> 
 
    <div class="child">8</div> 
 
</div>

Answer 3

вы можете использовать один и тот же код в скрипку с небольшим изменением

@media screen and (max-width: 480px) { 
    #content { 
     width: auto; 
     position: relative; 
     top: 0; 
     margin: 20px 0; 
    } 
    article#pic4 { 
     position: absolute; 
     top: 0; 
     height: auto; 
    } 
    article#pic1{ 
     margin-top: 18px; 

} 

}