レスポンシブウェブデザインでレイアウトが変更されたときのHTML要素の切り替え順序

Question

レスポンシブウェブサイトを構築しています。ユーザーエクスペリエンスのために、モバイルからデスクトップへのレイアウト変更が必要です。具体的には、いくつかのHTML要素の順序を切り替える必要があります。

デスクトップとモバイルのHTML要素の順序が異なる必要があります。

モバイル

<div class="one">One</div> 
<div class="two">Two</div> 
<div class="three">Three</div> 

順序はこれは私が達成したいものの簡易版であるデスクトップため

<div class="one">One</div> 
<div class="three">Three</div> 
<div class="two">Two</div> 

を切り替えます。私はそれがprogressive enhancementと呼ばれると思います。ウェブデザインのエキスパートはhtml要素をどのように動かすのですか？ JavaScriptを使って？それは正常でしょうか？ jQueryプラグインはありますか？あなたは何をする必要があるかjqueryのことで、これを行うことができ

Answer 1

はちょうどあなたのレイアウトに応じて、これを達成するためのいくつかの方法があるだろう

if (mobile == true) { 

    $('div.three').insertBefore($('div.two')); 
} 

Answer 2

は、デバイスをチェックして、あなたは、このqustionをチェックResponsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

ようなものを学ぶことができます応答ウェブデザインを読み取ることもその良いそれに応じ

を挿入しています私はここで良いヒントを見つけても、この

1. Beginner’s Guide to Responsive Web Design
2. Responsive Web Design
をチェック必要に応じて

Answer 3

周りのDOMを変更するためのjQueryを使用しています。あなたのdivがデスクトップ上に並んでいて、モバイル上に縦に積み重なっている場合は、フロートとメディアクエリの組み合わせを使用して正しい順序で表示することができます。

最終的なフォールバックがない場合、4つのdivを作成することがあります。

<div>one</div> 
<div>three(mobile)</div> 
<div>two</div> 
<div>three(desktop)</div> 

メディアクエリを使用して、デバイスに応じて関連する「3つの」divを非表示にします。

Answer 4

次のコードは、モバイルでのdivをスタックし、デスクトップ上に、それは2列のレイアウト

<div class="main"> 

</div> 
<div class="aside"> 
</div> 

<style type="text/css"> 
    @media only screen and (min-width: 768px) { 
     .main {float:right;width:60%} 
     .aside {float:left;width:40%} 
    } 
</style> 

Answer 5

で試してみてください、次のようになります。 表示に：曲げます。 フレックス方向：列;ここ

さらに詳しい情報： https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Answer 6

私はグーグル経由で渡って来たので、この質問を復活し、既存の答えは時代遅れです。私が使用したソリューションはonly one with the downvoteでしたので、詳しく説明します。

あなたはcolumn/column-reverseプロパティを使用して、再注文の要素を可能にするdisplay:flexを使用する：

.container{ display:flex;flex-direction:column } 
@media screen and (min-width:600px) { 
    .container{ flex-direction:column-reverse } 
} 

JSFiddle here、およびいくつかのサポートテーブル hereを参照してください。

はまた、カップルのCSSのポストプロセッサ hereと here