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>

<强> See fiddle

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;
  }
}

Bootstrap网格拉/推行

3 个答案: