Bootstrap 3：如何僅在較小的螢幕尺寸上推/拉列
Bootstrap 提供了推拉列以調整其列的功能基於螢幕尺寸的佈局。但是，有時您可能會遇到這樣的情況：您只想在較小的螢幕尺寸上推/拉列，同時保持其在較大螢幕上的位置。
考慮以下HTML 結構：
<code class="html"><div class="col-lg-3">1</div> <div class="col-lg-2">2</div> <div class="col-lg-2">3</div> <div class="col-lg-2">4</div> <div class="col-lg-3">5</div></code>
此版面在大螢幕上顯示如下：
| 1 | 2 | 3 | 4 | 5 |
但您想要在較小的螢幕上使用不同的佈局畫面：
| 1 | 5 | | 2 | 3 | 4 |
解決方案：
要實現這一目標，我們需要以「行動優先」的思維來解決問題。首先配置最小螢幕尺寸的佈局，然後使用推/拉類別將列移動到較大螢幕上的所需位置。
更新的HTML：
<code class="html"><div class="col-lg-3 col-xs-6">1</div> <div class="col-lg-3 col-xs-6 col-lg-push-6">5</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>
透過將大螢幕和小螢幕的列類放置在同一個標籤中，我們可以確保列首先在平板電腦上以所需的順序放置。然後，推/拉類別用於調整它們在桌面上的位置。
此更新的程式碼將在所有螢幕尺寸上產生所需的版面：
大螢幕：
| 1 | 5 | 2 | 3 | 4 |
小螢幕：
| 1 | 5 | | 2 | 3 | 4 |
以上是如何僅在較小的螢幕尺寸上推/拉 Bootstrap 3 中的列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
