モバイルデバイスの注文を変更してください

私はこのブートストラップコードを作成しました。しかし、私はsmとxsのビューポートがどのように順序を変えるかを理解できないので、画像divはHeadline divの下にあります。モバイルデバイスの注文を変更してください

どのように私はそれを行うことができますか？

https://plnkr.co/edit/yDwXuk1mia7JUVVEJ7kY?p=preview

<body class="landingpage"> 
    <div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div> 
    <div class="top-area" style="border: 4px solid red;"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4" style="border: 4px solid pink;"> 
      Logo 
      </div> 
      <div class="container"> 
       <div class="row"> 
       <div class="col-sm-12" style="border: 4px solid yellow;"> 
        <p>Picture</p> 
       </div> 
       <div class="col-sm-6 col-sm-pull-6" style="border: 4px solid blue;"> 
        <p class="header-xl center"> 
        HEADLINE TEXT 
        </p> 
        <p class="sub-header center"> 
        Subline text 
        </p> 
       </div> 
       </div> 
      </div> 
    </div> 
    </body> 
</html>

出典

2016-08-18 McDuck4

"可視-SM" との見出しおよび "可視-XS" クラスの下に別のdivを作成し、最初のdiv

に "隠れ-SM" と "隠された-XS" を追加

<body class="landingpage"> 
    <div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div> 
    <div class="top-area" style="border: 4px solid red;"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4" style="border: 4px solid pink;"> 
      Logo 
      </div> 
      <div class="container"> 
       <div class="row"> 
       <div class="col-sm-12 hidden-sm hidden-xs" style="border: 4px solid yellow;"> 
        <p>Picture</p> 
       </div> 
       <div class="col-sm-6 col-sm-pull-6" style="border: 4px solid blue;"> 
        <p class="header-xl center"> 
        HEADLINE TEXT 
        </p> 
        <p class="sub-header center"> 
        Subline text 
        </p> 
       </div> 
       <div class="col-sm-12 visible-sm visible-xs" style="border: 4px solid yellow;"> 
       <p>Picture</p> 
       </div> 
       </div> 
      </div> 
    </div> 
    </body> 
</html>

EDIT：コメントでリカルド・ルイスのソリューションは、はるかに優れたソリューションです

出典

2016-08-18 22:41:54 Cytex01

ありがとうございました。私はちょうどコードを試しましたが、見出しの上と見出しの下に画像があることがわかります。私は大きなデバイスで十分に説明していませんでした。それがIpadのサイズに達すると、注文は正常になるはずです。これは私のコードがどういう意味であるかを意味します。あなたが作った最後のPictureクラスを削除できますか？ – McDuck4

「hidden-sm」および「visible-sm」クラスを削除します。 iPadで見ると、その画像が見出しの上に表示されます。 – Cytex01

それは今私のために意味を作る。ありがとうございました – McDuck4

@media (max-width: 767px) { 
 
    .sm-col-reorder { display: flex; flex-direction: column; } 
 
    .sm-order-1 { order: 1; } 
 
    .sm-order-2 { order: 2; } 
 
}

<div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div> 
 
<div class="top-area" style="border: 4px solid red;"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-4" style="border: 4px solid pink;"> 
 
     Logo 
 
     </div> 
 
     <div class="container"> 
 
     <div class="row sm-col-reorder"> 
 
      <div class="col-sm-12 sm-order-2" style="border: 4px solid yellow;"> 
 
      <p>Picture</p> 
 
      </div> 
 
      <div class="col-sm-6 col-sm-pull-6 sm-order-1" style="border: 4px solid blue;"> 
 
      <p class="header-xl center"> 
 
       HEADLINE TEXT 
 
      </p> 
 
      <p class="sub-header center"> 
 
       Subline text 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

出典

2016-08-18 22:54:33 Maju

ありがとうございました。それは実際に私が望むものです。ここで私のコードを見る時間があれば：https://plnkr.co/edit/yDwXuk1mia7JUVVEJ7kY?p=preview ..それがmdに達すると、絵と見出しのタグはお互いの代わりになるでしょう。それをあなたのコードに組み込めますか？私は前にフレックス方向で働いていませんでした： -/ – McDuck4

フレックス方向は、他のブロックの下に1ブロックを持つことが重要です。フレックスボックスのガイドを確認することができます。 [css-tricks]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。ブラウザとの互換性も確認してください。問題はありません。さもなければ、Cytex01のソリューションははるかに優れており、どこでも使えるはずです。 – Maju

モバイルデバイスの注文を変更してください

答えて

関連する問題