更改移動設備中的訂單

我製作了此引導程序代碼。但我無法弄清楚我是如何在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」類創建的標題下，另一格，添加「隱藏SM」和「隱藏XS」的第一個div

<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>

編輯：在評論裏卡多·魯伊斯的解決方案是一個更好的解決方案

來源

2016-08-18 22:41:54 Cytex01

非常感謝您的回答。我只是試了一下代碼，但是我可以看到標題上方有一張圖片。我沒有用更大的設備來描述它。當它達到Ipad大小時，順序應該是正常的，這意味着我的代碼是如何。那麼我可以刪除你製作的最後一個圖片類嗎？ – 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時，圖片和標題標記將會替代彼此。我可以將它合併到你的代碼中嗎？我之前沒有使用flex-direction： -/ – McDuck4

flex-direction重要的是在其他區域之下有一個區塊。您可以查看一些Flexbox指南，例如[CSS-技巧]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。請檢查與瀏覽器的兼容性，它是否適合你。否則，Cytex01的解決方案要好得多，應該到處工作。 – Maju

更改移動設備中的訂單

回答

相關問題