1

2 つの div の順序を変更したい。HTML:

<div>container
<div> Navigation backwards </div>
<div> Social buttons </div>
<div> Navigation forwards </div>
</div>

大きな画面では次のように表示されます: <-- [social] -->

小型 (モバイル) デバイスの場合は、次のように変更する必要があります:
<-- -->
[social]

これは純粋なcssで可能ですか? HTML を追加してdisplay: noneで解決することもできますが、それは見苦しい解決策です。

4

2 に答える 2

1 
/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }
于 2013-07-26T07:44:02.967 に答える
1

だから@acudarsは正しい...しかし、ここで考慮すべきことがいくつかあります。1 つのことは、マークアップの順序によってこれを実現するのが難しくなるということです... そのため、下部にソーシャル ボタンを追加することで、これを実現しやすくすることができます。

私は先に進み、jsFiddle: Demoを作成しました

HTML

<div class="navCont">
  <div class="arrowPrev">&larr;</div>
  <div class="arrowNext">&rarr;</div>
  <div class="socialButtons">Social Buttons</div>
</div>

CSS

.navCont {
    background: #f6f6f6;
    border-radius: 5px;
    clear: both;
    overflow: hidden;
    padding: 5px 10px;
}

.arrowPrev {
    float: left;
}

.socialButtons {
    text-align: center;
}

.arrowNext {
    float: right;
}


@media (max-width: 320px) {
  .socialButtons {
    float: none;
    clear: both;
  }
}

幅 320 ピクセルのモバイル デバイスをターゲットにしているとしましょう。フィドルのサイズを変更して、実際の動作を確認してください。

CSS は非常に単純で、わかりやすくするために少しスタイルを追加しただけです。

于 2013-07-26T08:01:10.807 に答える