CSS応答 - divの

#div1 { 
 
     position: relative; 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 

 
    #div2 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 

 
    @media (max-width: 400px) { 
 

 
    #div1 { 
 
      position: absolute; 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 

 
    #div2 { 
 
     position: absolute; 
 
     left: 0; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
<title></title> 
 
<meta charset="utf-8" /> 
 
    
 
<body> 
 

 
<div id="div1"> 
 
    <h1>Box 1</h1> 
 
</div> 
 

 
<div id="div2"> 
 
    <h1>Box 2</h1> 
 
</div> 
 
<div id="div2"> 
 
    <h1>Box 3</h1> 
 
</div> 
 

 
</body> 
 
</html>

の変更命令は、私は私が上で、私のサイトを閲覧していますデバイスの種類に基づいてdiv要素の注文を変更することができます彼らの方法ですか？私はレスポンシブルデザインを作成しようとしています。私は本質的に3つのdivsを持つこの非常に簡単なサンプルを作成しました。それらは、デスクトップ上で1,2,3の順になっています。モバイルデバイスを処理するために私のCSSにメディアクエリを追加しました。私は命令が2,1,3から変わるようにしたい。私はCSSでこれを達成する方法がなければならないと確信していますが、私はそれに慣れていません。何か案は？おかげ

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title></title> 
<meta charset="utf-8" /> 

<style> 
    #div1 { 
     position: relative; 
     max-width: 100%; 
     height: 100px; 
     background-color: green; 
     color: white; 
    } 

    #div2 { 
     position: relative; 
     max-width: 100%; 
      height: 100px; 
     background-color: red; 
      color: white; 
    } 

     #div3 { 
     position: relative; 
     max-width: 100%; 
      height: 100px; 
     background-color: blue; 
      color: white; 
    } 

    @media (max-width: 400px) { 

    #div1 { 
      position: absolute; 
     max-width: 100%; 
     height: 100px; 
     background-color: green; 
     color: white; 
    } 

    #div2 { 
     position: absolute; 
     left: 0; 
     max-width: 100%; 
      height: 100px; 
     background-color: red; 
      color: white; 
    } 

     #div3 { 
     position: relative; 
     max-width: 100%; 
      height: 100px; 
     background-color: blue; 
      color: white; 
    } 


    } 
</style> 

</head> 


<body> 

<div id="div1"> 
    <h1>Box 1</h1> 
</div> 

<div id="div2"> 
    <h1>Box 2</h1> 
</div> 
<div id="div2"> 
    <h1>Box 3</h1> 
</div> 

</body> 
</html>

出典

2016-11-28 Scott

（https://css-tricks.com/snippets/css/a-guideをしてもIE-9と下のバージョンで動作します-to-flexbox /）：orderプロパティを見てください。 –

ありがとうございます、注文プロパティは私が必要とする可能性がIE 9をサポートするようには表示されませんが表示されます – Scott

IE9をサポートする必要がある場合は、最善のことは、いくつかのJavaScriptを使用することです。 –

使用flexは、要素を表示し、方法2 order

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
<title></title> 
 
<meta charset="utf-8" /> 
 

 
<style> 
 
    #div1 { 
 
     position: relative; 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 

 
    #div2 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 

 
    @media (max-width: 400px) { 
 
    body{ 
 
    display:flex;/* 
 
    flex-direcion:row;*/ 
 
    } 
 
     #div2{ 
 
     order:-1; 
 
     } 
 

 
    #div1 {/* 
 
    position: absolute;*/ 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 

 
    #div2 {/* 
 
    position: absolute; 
 
    left: 0;*/ 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 

 
    } 
 
</style> 
 

 
</head> 
 

 

 
<body> 
 

 
<div id="div1"> 
 
    <h1>Box 1</h1> 
 
</div> 
 

 
<div id="div2"> 
 
    <h1>Box 2</h1> 
 
</div> 
 
<div id="div3"> 
 
    <h1>Box 3</h1> 
 
</div> 
 

 
</body> 
 
</html>

を使用して順序を変更するには： - （すべてのブラウザで動作します）

追加表示されるhidden div max-width:400pxと元のdivを非表示にした場合のみです。それはあまりにも、私はあなたがフレキシボックスを使用しようとすることができると思う

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
<title></title> 
 
<meta charset="utf-8" /> 
 

 
<style> 
 
    #div1, #div1-alter { 
 
     position: relative; 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 
    #div1-alter{ 
 
     display:none; 
 
    } 
 

 
    #div2 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 

 
    @media (max-width: 400px) { 
 

 
     #div2{ 
 
     order:-1; 
 
     } 
 

 
    #div1, #div1-alter {/* 
 
    position: absolute;*/ 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 

 
    #div2 {/* 
 
    position: absolute; 
 
    left: 0;*/ 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 
    #div1{ 
 
     display:none; 
 
    } 
 
    #div1-alter{ 
 
     display:inherit; 
 
    } 
 
    } 
 
</style> 
 

 
</head> 
 

 

 
<body> 
 

 
<div id="div1"> 
 
    <h1>Box 1</h1> 
 
</div> 
 

 
<div id="div2"> 
 
    <h1>Box 2</h1> 
 
</div> 
 
<div id="div1-alter"> 
 
    <h1>Box 1</h1> 
 
</div> 
 
<div id="div3"> 
 
    <h1>Box 3</h1> 
 
</div> 
 

 
</body> 
 
</html>

出典

2016-11-28 19:59:28 jafarbtech

フレックスボックスのアプローチは私が必要とするものですが、古いブラウザにも対応できる必要があります。画面サイズに基づいてdivを表示したり非表示にしたりするのは嫌いですが、選択肢がない可能性があります。 – Scott

Yaah。それ以外の場合は、javascriptで行うことができます。もしあなたがcssだけの古いブラウザについて書いているのであれば、それは最善のものです。 \t それが本当に役立つ場合は、受け入れてupvoteしてください。あなたのような誰かのために解決策を見つけることは役に立ちます。 – jafarbtech

CSS応答 - divの

答えて

関連する問題