2

可能であれば、JavaScriptなしでこれを実行したいと思います。

ページが特定のサイズになったときの順序を変更したい要素が1ページに2つ以上あります。私はメディアクエリを使用しており、画面サイズに基づいてさまざまなcssを提供します。通常、Div "a"は一番上にあるはずですが、画面サイズが480px未満の場合、bはaの真上にあるはずです。

<div id="a" class="myDivs">Top when on desktop</div>
<div id="b" class="myDivs">Becomes top when under 480px wide screen</div>

mobile.cssに保持する必要のあるCSS：

.myDivs {
  width: 100%;
}

したがって、高さは指定されていません。したがって、単純に絶対位置を設定してマージントップまたはトップを設定することはできません。

4

4 に答える 4

6 
 <div class="parent">
    <div class="child-1">This is Child One</div>
    <div class="child-2">This is Child Two</div>
    <div class="child-3">This is Child Three</div>
 </div>

CSSのテーブルレイアウトを使用して、divを再配置します。

@media screen and (max-width: 768px) {
    .parent { 
      display: table;
    }
    .child-3 {
      display: table-header-group;
    }
    .child-1 {
      display: table-footer-group;
    }
}

要素は、Child 3、Child2、Child1の順序で表示されます。

フィドルはここにあります：http：//jsfiddle.net/lockedown/gyef3vj7/1/

于 2014-10-06T19:04:21.703 に答える
5

あなたは、プレゼンテーションの観点からソース順序の独立性について話している。悪いニュースは、今日の時点で、あなたは非常に不器用にならずに運が悪いということです（読んでください：JSまたは同様のものでDOMを動かします）。幸いなことに、 CSSFlexboxの形でヘルプが進行中です。そのページの「注文」を確認してください。

その他のリソース：

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes

http://css-tricks.com/old-flexbox-and-new-flexbox/

于 2013-03-01T15:59:35.343 に答える
2

これはトリックを行うかもしれませんが、おそらく欠点があります...

CSS：

.child-1,.child-2 {
    width:100%;
}

.parent{position:relative;}


@media screen and (max-width:480px){
    .child-1{
       position: absolute;
       top: 100%;
    }
}

HTML：

<div class="parent">
    <div class="child-1">This is Child One</div>
    <div class="child-2">This is Child Two</div>
</div>

デモ：http：//jsfiddle.net/pavloschris/pYkfK/embedded/result/

于 2013-03-01T16:21:42.840 に答える
0 
<div class="parent">
    <div class="child-1">This is Child One</div>
    <div class="child-2">This is Child Two</div>
</div>

FlexBoxを使用して-iPadiOS7でテストすると、2つの列が逆になります。

@media screen and (max-width: 480px)
{
   .parent 
   {
       display: -webkit-flex;
       display: flex;
       -webkit-flex-direction: column-reverse;
       flex-direction: column-reverse; 
   }
}

私はModernizrを使用しているので、HTMLタグのクラスから「flexbox」クラスを削除することで、非フレックスボックスのサポートを簡単にテストできます。

.flexbox .parent 
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse; 
}

注：私はFlexboxを初めて使用するため、現在または将来必要となる正しいプレフィックスがすべてではない可能性がありますが、iPadでテストしました。これが私の主なターゲットであり、美しく機能します。iPadのCSSフレキシブルボックスレイアウトも参照してください

于 2014-05-16T20:33:44.320 に答える