DIV с поплавком прямо над DIV с поплавком слева

Question

Привет У меня есть div div, у которого есть div на дне его. Этот div имеет два других div «DIV 1» и «DIV 2» (см. Рисунок). Теперь я навигация закрыта на планшетном устройстве, поэтому я бы показал второй div, который содержит float: прямо над первым div, который содержит float: left, как на картинке. Как я могу это сделать? Теперь первый div находится над вторым. Благодарю.

Answer 1

Вы можете сделать это с Flexbox и медиа-запросами просто изменить order второго элемента order: -1, вот Fiddle

.nav { 
 
    height: 200px; 
 
    display: flex; 
 
    align-items: flex-end; 
 
    border: 1px solid black; 
 
} 
 
.one { 
 
    background: #5B9BD5; 
 
} 
 
.two { 
 
    background: #FF0000; 
 
} 
 
.div { 
 
    flex: 1; 
 
    padding: 10px 0; 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    box-sizing: border-box; 
 
} 
 
@media(max-width: 480px) { 
 
    .nav { 
 
    flex-direction: column; 
 
    align-items: normal; 
 
    justify-content: flex-end; 
 
    } 
 
    .div { 
 
    flex: 0 0 50px; 
 
    } 
 
    .two { 
 
    order: -1; 
 
    } 
 
}

<div class="nav"> 
 
    <div class="div one">1</div> 
 
    <div class="div two">2</div> 
 
</div>

Answer 2

Вы можете использовать media queries для этой цели.

Вы можете просто манипулировать своими divs в какой-то момент, чтобы изменить их стиль.

@media (max-width: 600px) { 
    #someElement { 
    float: left; 
    } 
} 

Answer 3

Вы можете попробовать следующее, наряду с запросами средств массовой информации для удаления поплавка на 800px:

JSFiddle: https://jsfiddle.net/7ws3m9Lx/

CSS:

.div1,.div2 { width: 50%; } 
.div1 { float: left; } 
.div2 { float: right; } 

@media screen and (min-width: 0) and (max-width: 800px){ 
    .div1,.div2 { float: none; width: 100%; } 
} 

HTML:

<div class="parent"> 
    <div class="div2">DIV2</div> 
    <div class="div1">DIV1</div> 
</div>