重新排序的div在自舉3

我有一組的4個格堆疊成這樣：重新排序的div在自舉3

1區

2區

股利3

股利4

當瀏覽器寬度是sm或xs，我需要隱藏第一個div並重新安裝其餘的div：

股利3

2區

股利4

我已經知道如何隱藏第一格，但無法找到重新排序remaing div的解決方案。

任何幫助將不勝感激。

感謝， TKramer

來源

2013-12-09 Trick Kramer

-1

最簡單的解決方案必須在DOM都1.2.3.4和3.2.4，並使用頁面大小來決定哪個顯現。

來源

2013-12-09 22:50:00 crazymykl

但後來我不得不保持2個實例，對吧？ –

我沒有建立升級或降級這個答案的聲望，所以我只想說，雖然這可能是最簡單的解決方案，但它不是最好的解決方案。 –

這是唯一的純css3解決方案。用JavaScript重新排序是可能的。 – crazymykl

因爲你的div被堆疊在所有網格上並且（如我所料）col-xs-12類。 col-xs-12類將寬度設置爲100%，這就是爲什麼您不能使用float來重新排列列（或推和拉，所描述的.col-md-push- *和.col-md-pull- *修飾符類在http://getbootstrap.com/css/#grid-options）。

一個可能的解決方案，可以發現在：http://tanalin.com/en/articles/css-block-order/

使用CSS display:table你可以這樣做：

HTML：

<div class="container"> 
<div class="row"> 
    <div class="col-xs-12" id="div1"> DIV 1 </div> 
    <div class="col-xs-12" id="div2"> DIV 2 </div> 
    <div class="col-xs-12" id="div3"> DIV 3 </div> 
    <div class="col-xs-12" id="div4"> DIV 4 </div> 
</div>

CSS：

@media (max-width:767px) { 
.row {display: table; width: 100%; } 
#div1 {display: none;} 
#div3 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */ 
#div2 {display: table-row-group; } /* Will be displayed in the middle */ 
#div4 {display: table-header-group; } /* Will be displayed at the top */ 
}

來源

2014-06-26 12:50:14

重新排序的div在自舉3

回答

相關問題