Bootstrap網格拉/推行

Question

我有一個響應式引導網格，我希望以不同的順序顯示，具體取決於設備寬度。

sm或更低：

--------------
|      1     |
--------------
|      2     |
--------------
|      3     |
--------------
|      4     |
--------------
|      5     |
--------------
|      6     |
--------------
|      7     |
--------------

md或更高：

-------------
| 2 | 4 | 6 |
-------------
|     1     |
-------------
| 3 | 5 | 7 |
-------------

我的問題是col-pull和col-push只將柱子移到兩側，而不是上下移動。

這是我到目前為止：

  <div class="row">
    <div class="col-md-12">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4 col-md-push-4">3</div>
    <div class="col-md-4 col-md-pull-4">4</div>
    <div class="col-md-4 col-md-push-4">5</div>
    <div class="col-md-4 col-md-pull-4">6</div>
    <div class="col-md-4">7</div>
  </div>

，它在小型顯示器中正確顯示，但在大型顯示器上顯示如下：

-------------
|     1     |
-------------
| 2 | 4 | 3 |
-------------
| 6 | 5 | 7 |
-------------

我需要交換第一行和第二行，並將第3列與第6列交換。我如何實現這一目標？

非常感謝你

Answer 1

您可能不必復制所有元素，只需復制要隱藏/顯示的元素。 有點像：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-12 visible-xs">1</div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-4">2</div>
        <div class="col-xs-12 col-md-4 col-md-push-4">3</div>
        <div class="col-xs-12 col-md-4 col-md-pull-4">4</div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-12 hidden-xs">1</div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-4 col-md-push-4">5</div>
        <div class="col-xs-12 col-md-4 col-md-pull-4">6</div>
        <div class="col-xs-12 col-md-4">7</div>
    </div>
</div>

看小提琴

Answer 2

我知道這是作弊，並重復你的HTML標記，但這是我如何處理這些：

<div class="col-xs-visible">
    <!-- Your mobile version here -->
    <div class="row">
        <div class="col-xs-12">1</div>
        <div class="col-xs-12">2</div>
        <div class="col-xs-12">3</div>
        <div class="col-xs-12">4</div>
        <div class="col-xs-12">5</div>
        <div class="col-xs-12">6</div>
        <div class="col-xs-12">7</div>
    </div>
</div>
<div class="col-xs-hidden">
    <!-- Your non-mobile version here -->
    <div class="row">
        <div class="col-sm-4">2</div>
        <div class="col-sm-4">4</div>
        <div class="col-sm-4">6</div>
        <div class="col-sm-12">1</div>
        <div class="col-sm-4">3</div>
        <div class="col-sm-4">5</div>
        <div class="col-sm-4">7</div>
    </div>
</div>

Answer 3

結合給定的答案，我用這段代碼找到了解決方法：

  <div class="row">
    <div class="col-md-12 only-mobile">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4 only-mobile">3</div>
    <div class="col-md-4">4</div>
    <div class="col-md-4 no-mobile">6</div>
    <div class="col-md-12 no-mobile">1</div>
    <div class="col-md-4 no-mobile">3</div>
    <div class="col-md-4">5</div>
    <div class="col-md-4 only-mobile">6</div>
    <div class="col-md-4">7</div>
  </div>

CSS：

.no-mobile{
  display: block;
}
.only-mobile{
  display: none;
}
@media screen and (max-width:992px){
  .no-mobile{
    display: none;
  }
  .only-mobile{
    display: block;
  }
}