штабелирования Divs в обратном порядке ответно

Question

У меня есть два DIV в том, что бок о бок в более широком экране (скажем 1000 пикселей)

Box 1 является слева от Box 2

При изменении размера экрана в скажем, 330 пикселей, я хочу Box 2 ABOVE Box 1.

У меня нет проблем с коробкой 1 ВЫШЕ Box 2, но не наоборот.

Я надеюсь, что это можно сделать с помощью css - я могу сделать это с javascript.

Answer 1

Вы можете использовать медиа-запрос, чтобы изменить правила CSS при определенной ширине экрана:

div { 
 
    width: 130px; 
 
    background-color: #7A9; 
 
    margin: 10px; 
 
    display: inline-block; 
 
} 
 

 
@media screen and (min-width: 331px) { 
 
    #box1 { 
 
    float: left; 
 
    } 
 
    #box2 { 
 
    float: right; 
 
    } 
 
}

<div id="box2">BOX 2</div> 
 
<div id="box1">BOX 1</div>

Answer 2

Как вы говорите об отклике, вступает в игру @media запросов. Я не занимаюсь поиском старых версий IE, поэтому я использую FlexBox для вашего решения. У нас могут быть обратные и заказы в flexbox.

Отрывок

.flex-container { 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-flex-wrap: nowrap; 
 
    -ms-flex-wrap: nowrap; 
 
    flex-wrap: nowrap; 
 
    -webkit-justify-content: flex-start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    -webkit-align-content: stretch; 
 
    -ms-flex-line-pack: stretch; 
 
    align-content: stretch; 
 
    -webkit-align-items: flex-start; 
 
    -ms-flex-align: start; 
 
    align-items: flex-start; 
 
} 
 

 
.flex-item { 
 
    -webkit-order: 0; 
 
    -ms-flex-order: 0; 
 
    order: 0; 
 
    -webkit-flex: 0 1 auto; 
 
    -ms-flex: 0 1 auto; 
 
    flex: 0 1 auto; 
 
    -webkit-align-self: auto; 
 
    -ms-flex-item-align: auto; 
 
    align-self: auto; 
 
} 
 

 
div {border: 1px solid #ccc; max-width: 100px;} 
 
div div {width: 50px; height: 50px; line-height: 50px; text-align: center;} 
 

 
@media (max-width: 330px) { 
 
    .flex-container { 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column-reverse; 
 
    -ms-flex-direction: column-reverse; 
 
    flex-direction: column-reverse; 
 
    -webkit-flex-wrap: nowrap; 
 
    -ms-flex-wrap: nowrap; 
 
    flex-wrap: nowrap; 
 
    -webkit-justify-content: flex-start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    -webkit-align-content: stretch; 
 
    -ms-flex-line-pack: stretch; 
 
    align-content: stretch; 
 
    -webkit-align-items: flex-start; 
 
    -ms-flex-align: start; 
 
    align-items: flex-start; 
 
    } 
 

 
    .flex-item { 
 
    -webkit-order: 0; 
 
    -ms-flex-order: 0; 
 
    order: 0; 
 
    -webkit-flex: 0 1 auto; 
 
    -ms-flex: 0 1 auto; 
 
    flex: 0 1 auto; 
 
    -webkit-align-self: auto; 
 
    -ms-flex-item-align: auto; 
 
    align-self: auto; 
 
    } 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">1</div> 
 
    <div class="flex-item">2</div> 
 
</div>

Другим вариантом для старых браузеров с использованием только поплавка в хитром способе.

Отрывок с буев

div {border: 1px solid #ccc; max-width: 104px;} 
 
div div {width: 50px; height: 50px; line-height: 50px; text-align: center;} 
 

 
div {overflow: hidden;} 
 
div div {float: left;} 
 
div div:first-child {float: right;} 
 

 
@media (max-width: 330px) { 
 
    div div {float: none;} 
 
}

<div class="container"> 
 
    <div class="item">2</div> 
 
    <div class="item">1</div> 
 
</div>