如何僅在較小的螢幕尺寸上推/拉 Bootstrap 3 中的列？

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中文網其他相關文章！