如何將列內的內容拆分爲移動設備和平板電腦上的相鄰列

我正在使用引導程序3，並且我正在嘗試使用移動設備&平板電腦將內容從一列移動到另一列。我必須將它放在另一列中，因爲我將它放在相鄰列中的標題/圖像下，其餘的放在底部以獲得更好的移動體驗。該頁面已完全編碼，我正在嘗試改善移動體驗。如何將列內的內容拆分爲移動設備和平板電腦上的相鄰列

附加的圖像應該解釋我想要達到的目的。鏈接：Visual look

我目前的計劃是重複的內容，只顯示它在移動&平板視圖，而隱藏在移動&平板電腦的原始列。我只是想知道這是否會開始變得過於沉重，尤其是對於移動設備？（它是我的理解，即使在使用@media時，所有內容仍然被加載）

我是否正確接近？

Col-1和Col-2根據圖像在技術上不是「col」，但它們在大屏幕上。這是我正在嘗試爲移動設備修復的圖片的右上角的基本結構。

<div class="row"> 

    <div class=col-md-8> 
    All of the content from col-3 as per image 
    </div> 

    <div class="col-md-4> 
    All of the content from col-4 as per the image 
    </div> 

</div>

來源

2014-05-24 user3670720

可能是正確的做法，但如果你分享你的代碼可以更好的告訴。 –

嘿肖恩，我認爲這可能是唯一的選擇，無需重新編碼或更改設計和佈局。我可能會重新執行代碼，併爲整個頁面分別放置不同的行，但這樣做沒有意義，並且需要很長時間。 – user3670720

是的。 hidden-xs很簡單，很有用。它解決了我的問題在這裏：http://stackoverflow.com/questions/23718339/change-order-of-divs-with-push-pull-column-in-bootstrap –

根據屏幕大小添加多個類以給出不同的行爲。

的grid section of Bootstrap 3幫助提供了更多的細節，但在你的情況：

<div class="row"> 

    <div class="col-md-8 col-sm-12"> 
    All of the content from col-3 as per image 
    </div> 

    <div class="col-md-4 col-sm-12"> 
    All of the content from col-4 as per the image 
    </div> 

</div>

來源

2014-05-24 03:46:11

感謝您的答覆。對不起，是的，一切都按照你所提到的縮小了。我只是把基本結構作爲一個例子。我認爲帶有重複內容的@media是將內容從一列移到另一列的唯一方法。因爲我基本上把最後一列分成不同的部分，並將它們移到另一個不同位置的列。 – user3670720

如何將列內的內容拆分爲移動設備和平板電腦上的相鄰列

回答

相關問題