2番目の要素を最初にスタックし、次に3番目の要素をスタックします。

Question

3つのdivがあります。私はそれらを1行に入れてインラインブロックを使用したい。ウィンドウのサイズを変更すると、3番目の要素（nav）がスタックされ、次に2番目の要素（searchBar）がスタックされます。私は2番目の要素のスタックを最初に、3番目の要素をスタックしたい。元に戻すためには、3番目の要素と2番目の要素。

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    min-eight: 48px; 
 
    position: fixed; 
 
    background: #ffffff; 
 
    padding-bottom: 5px; 
 
    border-bottom: 2px solid #fed700; 
 
} 
 

 
nav { 
 
    width: 489.7px; 
 
    height: 18px; 
 
    background: red; 
 
    display: inline-block; 
 
} 
 

 
#searchBar { 
 
    width: 330px; 
 
    height: 16px; 
 
    background: blue; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
} 
 

 
#logo { 
 
    width: 220px; 
 
    height: 32px; 
 
    background: green; 
 
    display: inline-block; 
 
}

<header> 
 
    <div id=logo>logo 
 
    </div> 
 
    <div id=searchBar>searchBar 
 
    </div> 
 
    <nav>nav 
 
    </nav> 
 
</header>

Answer 1

あなたは、ナビゲーションと検索バーを包む、最小幅とインラインブロックのラッパーを使用することができます。これは、提供されたコードサンプルを使用したいと望む結果をもたらしますが、要件に応じて現実世界で問題を引き起こす可能性があります。

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    min-height: 48px; 
 
    position: fixed; 
 
    background: #ffffff; 
 
    padding-bottom: 5px; 
 
    border-bottom: 2px solid #fed700; 
 
} 
 

 
.wrapper { 
 
    min-width: 50%; 
 
    display: inline-block; 
 
} 
 
nav { 
 
    width: 489.7px; 
 
    height: 18px; 
 
    background: red; 
 
    display: inline-block; 
 
} 
 

 
#searchBar { 
 
    width: 330px; 
 
    height: 16px; 
 
    background: blue; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
} 
 

 
#logo { 
 
    width: 220px; 
 
    height: 32px; 
 
    background: green; 
 
    display: inline-block; 
 
}

<header> 
 
    <div id=logo>logo 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div id=searchBar>searchBar 
 
    </div> 
 
    <nav>nav 
 
    </nav> 
 
    </div> 
 
</header>