メディアクエリでhtmlコンテナの位置を変更する方法

私はbox1とbox2という2つのdivクラスを持っています。メディアクエリでhtmlコンテナの位置を変更する方法

画面サイズを600px以下に変更すると、box1とbox2の両方が幅：100％を取得し、ボックス1は上部に、ボックス2は下部に残ります。これらのボックスの位置を変更する方法はありますか？その場合、ボックス2は上部から、ボックス1は下部から、のhtmlから要素の位置を変更することなく維持されますか？

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>this is the title</title> 


<style type="text/css"> 


.box1{ 
    width:100px; 
    height:100px; 
    background:red; 
    float:left; 
} 

.box2{ 
    width:100px; 
    height:100px; 
    background:blue; 
    float:right; 
} 

.wrapper{ 
    max-width:500px; 
} 




@media screen and (max-width:600px){ /* for tablets */ 
    .box1{ 
     width:100%; 
     float:right; 
    } 
    .box2{ 
     width:100%; 
     float:right; 
    } 
} 


</style> 



</head> 

<body> 

<div class="wrapper"> 
    <div class="box1"></div> 
    <div class="box2"></div> 

</div> 

<script> 


</script> 

</body> 

</html>

出典

2017-06-26 Pleinair

あなたのメディアクエリでこれを追加することができます。

.wrapper { 
    display: flex; 
    flex-direction: column-reverse; 
}

これはお互いの下にそれらを配置し、HTMLコードで指定された順序が逆になります。

.box1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    float: left; 
 
} 
 

 
.box2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
    float: right; 
 
} 
 

 
.wrapper { 
 
    max-width: 500px; 
 
} 
 

 
@media screen and (max-width:600px) { 
 
    .wrapper { 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    } 
 
    .box1 { 
 
    width: 100%; 
 
    float: right; 
 
    } 
 
    .box2 { 
 
    width: 100%; 
 
    float: right; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="box1"></div> 
 
    <div class="box2"></div> 
 

 
</div>

出典

2017-06-26 18:45:14 Johannes

メディアクエリでhtmlコンテナの位置を変更する方法

答えて

関連する問題