我不是在抓兩個列到一列的Bootstrap網格嗎？

我一直在看一些文章，但我沒有真正掌握這個概念。我不是在抓兩個列到一列的Bootstrap網格嗎？

假設我有用於大中型設備的兩列網格。在第一列中有一些文字，第二列是一張圖像。當瀏覽器處於小型和小型的情況下，我希望網格成爲一列，圖像位於文本的頂部。

首先我不是100％確定我明白如何使網格從兩列減少到一列使用相同的網格代碼，然後即使它做到了，因爲圖像最初在第二列，wouldn它會移到第一欄文字的下方嗎？

因此，我現在可以考慮如何處理這個問題的唯一方法是按照我希望看到它們的方式創建兩個網格，然後根據瀏覽器端隱藏一個或另一個網格。這只是雙重工作來維護基於瀏覽器的同一頁面的兩個部分。

2017-03-22 Caverman

您可以使用Bootstrap pushpull類來反轉md和lg屏幕上的列順序。在sm和xs寬度列將以自然順序堆疊。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 col-md-push-6"><img src=".."></div> 
     <div class="col-md-6 col-md-pull-6">Some text</div> 
    </div> 
</div>

http://www.codeply.com/go/Nn6SKXwdH6

來源

2017-03-22 13:50:32 ZimSystem

因爲我不知道推/拉，我開始研究，一旦你給我在這裏。然後我來到這個鏈接，這有助於理解列順序。 https://scotch.io/tutorials/reorder-css-columns-using-bootstrap – Caverman

這裏是StackOverflow [文檔推拉]（http://stackoverflow.com/documentation/twitter-bootstrap/3330/grid-system/ 21719/column-order-manipulation-using-col-lg-push-and -col-lg-pull＃t = 201703221435175090626）和[Bootstrap push pull的完整指南]（http://blog.codeply.com/2015/04/06/responsive-bootstrap-layouts /） – ZimSystem

有人可以看看這個笨蛋，告訴我我做錯了什麼嗎？閱讀文章，似乎我應該先設計手機，這是我做的，看起來是正確的。但是，如果您將拼圖展開到一個較大的窗口，它會將圖像向右分割爲文本，但文本不會拉到頂部，因此文本與圖像保持一致，並且距離左側還有一點距離。 https://plnkr.co/edit/6Gm7Hvq3h6xINV7540LQ?p=preview – Caverman

我不是在抓兩個列到一列的Bootstrap網格嗎？

回答

相關問題