Создание клеток таблицы div, реагирующих и восстановленных

Question

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

Я создал этот медиа-запрос .... Проблема в том, что он, кажется, меняет позиции моих ящиков перед запуском запроса (похоже, он возвращает их обратно к исходному способу, которым они являются, когда запрос запускается .. (это полная противоположность того, что я хочу) ... Кроме того, когда она разрушается на множество строк, это не относится к высоте, и они слишком малы.

@media (min-width: 768px) { 

    html,body,.main { height: 100%; } 
    div { 
    position: absolute; 
    } 
    .box1, 
    .box2, 
    .box5 { 
    top: 0; 
    bottom: 66.6666%; 
    } 
    .box3, 
    .box4, 
    .box6 { 
    top: 33.3333%; 
    bottom: 33.3333%; 
    } 
    .box7, 
    .box8, 
    .box9 { 
    top: 66.6666%; 
    bottom: 0; 
    } 
    .box5, 
    .box3, 
    .box7 { 
    left: 0; 
    right: 66.6666% 
    } 
    .box1, 
    .box6, 
    .box9{ 
    right: 0; 
    left: 66.6666% 
    } 
    .box2, 
    .box4, 
    .box8 { 
    left: 33.3333%; 
    right: 33.3333%; 
    } 
     .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9 { 
     height:150px; 
    } 
} 

Вот мой codepen, чтобы вы могли понять, что происходит ... http://codepen.io/pisoj1/pen/BQWyRr

Answer 1

Обновление:

Отрывок обновленный

Теперь я понимаю, что вы пытаетесь сделать. Вы можете сделать это, добавив дубликат box5 элемента и установить его в display:none, а затем изменить свойства отображения в @media Rule

Любой экран меньше 600px шириной покажет box5 в верхней части. Вы меняете это на целевой экран.

Это Есливы не должны делать это на многих страницах и для многих элементов, , то вы можете захотеть взглянуть на что-то за пределамиcss

---

Старый Ответ

Это слишком упрощенный макет и вы не будет потребность @Media queries

Однако я думаю он производит желаемый эффект .

Wrap ваши маленькие коробки в контейнере <div>

Открыть фрагмент кода в полноэкранном режиме затем изменить размер окна, чтобы увидеть, как стек коробки.

.container: { 
 
    margin: 2% auto; 
 
} 
 
.box { 
 
    margin: 3%; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block 
 
} 
 

 

 
/* ------------------------------- Start Effect CSS --------------------------------------- */ 
 

 

 
#b5a { 
 
    /* I add a duplicate element that is set to display:none by defualt. it will only show up if the screen is smaller that "x" value. */ 
 
    display: none 
 
} 
 
@media (max-width: 600px) { 
 
    /* Here you can Change resolution below which box5 will be on top - "x" value */ 
 
    #b5a { 
 
    display: inline-block 
 
    } 
 
    #b5b { 
 
    display: none 
 
    } 
 
} 
 

 
/* ------------------------------- End Effect CSS --------------------------------------- */ 
 

 

 
/* ------------------------------ Start misc CSS selectors ------------------------------ */ 
 

 
body { 
 
    background: #131418; 
 
    color: #999; 
 
    text-shadow: 2px 2px 10px #000; 
 
    text-align: center; 
 
    font-size: 2em 
 
} 
 
#b1 { 
 
    background: red 
 
} 
 
#b2 { 
 
    background: blue 
 
} 
 
#b3 { 
 
    background: green 
 
} 
 
#b4 { 
 
    background: yellow 
 
} 
 
#b5a, 
 
#b5b { 
 
    background: orange 
 
} 
 
#b6 { 
 
    background: teal 
 
} 
 
#b7 { 
 
    background: cyan 
 
} 
 
#b8 { 
 
    background: purple 
 
} 
 
.visual { 
 
    border: 1px solid #444; 
 
    box-shadow: inset 0px 0px 200px 50px rgba(0, 0, 0, .7) 
 
} 
 
/* ------------------------------ End misc CSS selectors ------------------------------ */

<div class="container"> 
 
    <div class="box visual" id="b5a">5</div> 
 
    <div class="box visual" id="b1">1</div> 
 
    <div class="box visual" id="b2">2</div> 
 
    <div class="box visual" id="b3">3</div> 
 
    <div class="box visual" id="b4">4</div> 
 
    <div class="box visual" id="b5b">5</div> 
 
    <div class="box visual" id="b6">6</div> 
 
    <div class="box visual" id="b7">7</div> 
 
    <div class="box visual" id="b8">8</div> 
 
</div>

Answer 2

мне удалось решить. Я понял, что я сделал свой мобильный вид по умолчанию, а затем, когда он выше 768 пикселей, я перехожу на рабочий стол и меняю позиции. Поэтому я сделал мой box1 хранилищем моего среднего изображения (box5), так что это была простая замена. Что касается проблемы с высотой, я заставил ее изменить высоту моих ящиков, когда ширина равна MAX 769px.

@media(min-width:768px){ 
    html,body,main{ 
    height: 100%; 
    } 
    div{ 
    position: absolute; 
    } 
    .box5, 
    .box2, 
    .box3{ 
    top:0; 
    bottom:66.6666% 
    } 
    .box4, 
    .box1, 
    .box6{ 
    top:33.3333%; 
    bottom:33.3333%; 
    } 
    .box7, 
    .box8, 
    .box9{ 
    top:66.6666%; 
    bottom:0; 
    } 
    .box2, 
    .box4, 
    .box7{ 
    left:0; 
    right:66.6666% 
    } 
    .box3, 
    .box6, 
    .box9{ 
    right:0; 
    left:66.6666% 
    } 
    .box5, 
    .box1, 
    .box8{ 
    left:33.3333%; 
    right:33.3333%; 
    } 

} 
@media(max-width:768px){ 
     .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9 { 
     height:150px; 
    } 

}