divの幅を逆順に並べる

Question

私は現在、2つの部分からなるメニューを作成中です（画像参照）。モバイルでは、これらのメニュー項目を上から下に積み重ねて表示したいと思いますが、ボトムメニューからトップメニューまでです。 CSSでこれを行う方法はありますか？またはページ幅に応じて2つのメニューを作成し、正しいものを表示する必要がありますか？

編集：明確にするために、イメージは単に私が意味するものの例を示すことです。 CSSのdivをどういうわけか逆転させることができるのであれば（より絶対的な位置付けなしで）、より一般的な意味では不思議に思います。

EDIT 2：コードを追加しないとお詫び申し上げます。モバイルでhttps://codepen.io/anon/pen/GWwrMW

<div class="nav"> 
    <ul class="nav__top"> 
    <li>Sub Item 1</li> 
    <li>Sub Item 2</li> 
    </ul> 
    <ul class="nav__primary"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    </ul> 
</div> 


.nav__top, 
.nav__primary { 
    list-style: none; 
    margin: 0 0 20px 0; 
    text-align: right; 
    li { 
    display: inline-block; 
    padding: 10px; 
    background-color: #ccc; 
    } 
} 

が、私はサブアイテムがメイン項目の下に表示させたい：ここでの状況を示す小さなペンです。

Answer 1

これはflexとflex-direction: column-reverseで行うことができます。また、フレックスの子供のorderプロパティを使用してさらに制御することもできます。しかしあなたの例では、flex-direction: column-reverseが動作します。

.nav__top li, 
 
.nav__primary li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    background-color: #ccc; 
 
} 
 

 
@media (max-width: 420px) { 
 
    .nav { 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    } 
 
    .nav li { 
 
    display: list-item; 
 
    } 
 
}

<div class="nav"> 
 
    <ul class="nav__top"> 
 
    <li>Sub Item 1</li> 
 
    <li>Sub Item 2</li> 
 
    </ul> 
 
    <ul class="nav__primary"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    </ul> 
 
</div>

Answer 2

あなたが応答ナビゲーションバーをしたい場合は、メディアクエリを使用する必要があります。このようなもの

@media screen and (max-width: 600px){ 
    ul.topnav li {float: none;}} 

メニューがリストで作成されている場合は、これが機能します。

Answer 3

これは、CSSは、2番目のメニューの順番が逆になります追加：

.nav__primary { 
    display: flex; 
    flex-direction: row-reverse; 
} 

あなたはメディアクエリでそれを置くことができます。

https://codepen.io/anon/pen/ryQjdg

ADDITION：私は、水平に積層することの願いをoverread。この場合、あなたは必要です

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

Answer 4

それを実演しました。私は唯一のモバイルブラウザをサポートする必要があるので、私はフレキシボックスを使用することができます。

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