在三個基金會的基礎上更改訂單

我試圖在基金會中實現以下佈局。我應該使用哪些推拉類來使最後一列在桌面上的某一列上方？在三個基金會的基礎上更改訂單

 <div class="row"> 
     <div class="small-12 column large-10"> 
      First on mobile, First on desktop 
      </div> 
     <div class="small-12 large-12 column"> 
     Second on mobile, Third on desktop 
     </div> 
     <div class="small-12 column large-2> 
     Third on mobile, Second on desktop 
     </div> 
    </div>

來源

2015-11-13 user2667042

如果我做了正確的判斷，你想最後一個colmun放在中間，對嗎？ – felipsmartins

是的。在桌面上，我希望首先是大10，然後是最後一列大2，然後是大12。 – user2667042

移動訂單1,2,3。在桌面上訂購1,3,2。 – user2667042

其實，你不能！

由於一列12，它幾乎就像一行。

因此，您無法將列從一行推送到另一列。只能沿同一行移動它。換句話說，當有2個或更多的div（不是一個寬度爲12列）。

事實上，你應該使用和利用基金會Javascript Utilities，如matchMedia()或Foundation.utils.is_x的功能。

所以，你可以檢查，如果瀏覽器當前匹配傳過來的字符串matchMedia（媒體查詢）或使用默認基金會媒體查詢可用的方法：

if (Foundation.utils.is_large_only()) { 
    //do something... 
} else if (Foundation.utils.is_small_up()) { 
    //do something... 
}

我強烈建議你閱讀基礎文檔（JavaScript實用工具>媒體查詢部分），以瞭解它的工作原理。

來源

2015-11-13 20:35:17 felipsmartins

所以唯一的選擇是通過複製，然後相應地隱藏？ – user2667042

@ user2667042我編輯了我的答案。 – felipsmartins

首先你有一些在你的例子中的語法錯誤。其次，你應該是columns的類column。

<div class="row"> 
    <div class="small-12 columns large-10"> 
     First on mobile, First on desktop 
     </div> 
    <div class="small-12 large-12 columns"> 
    Second on mobile, Third on desktop 
    </div> 
    <div class="small-12 columns large-2"> 
    Third on mobile, Second on desktop 
    </div> 
</div>

此外，我不認爲你可以推/拉任何12列，如果12是你每列的列。我會做一些隱藏/顯示第二/第三項的解決方法。像下面的東西。

<div class="row"> 
    <div class="small-12 columns large-10"> 
     First on mobile, First on desktop 
     </div> 
    <div class="small-12 columns large-2 show-for-large-up"> 
    Third on mobile, Second on desktop 
    </div>      
    <div class="small-12 large-12 columns"> 
    Second on mobile, Third on desktop 
    </div> 
    <div class="small-12 columns large-2 show-for-medium-down"> 
    Third on mobile, Second on desktop 
    </div>        
</div>

也許有一種優雅的方式來重新排序通過基礎，我不知道的HTML。但我會用它作爲臨時修復，直到找到更具體的東西。

來源

2015-11-13 20:51:22 Waterpile

列和列是相同的東西。 – user2667042

在這種情況下，隱藏/顯示方法這是不切實際和骯髒的「解決方案」。順便說一下，列的列保持不變。 – felipsmartins

<div class="row"> 
    <div class="small-12 column large-10" style="background:red;"> 
    First on mobile, First on desktop 
    </div> 
    <div class="small-12 column large-2 show-for-large-up" style="background:green;"> 
    Second on desktop 
    </div> 
</div> 
<div class="row"> 
    <div class="small-12 column large-12" style="background:blue;"> 
    Third on desktop, Second on mobile 
    </div> 
    <div class="small-12 column show-for-small-only" style="background:yellow;"> 
    Third on mobile 
    </div> 
</div>

來源

2015-11-13 20:51:53 user2667042

在三個基金會的基礎上更改訂單

回答

相關問題