Bootstrap网格拉/推行 [英] Bootstrap grid pull/push rows

问题描述

我有一个响应式引导程序网格，我希望根据设备宽度以不同的顺序显示。

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列交换。我该如何实现这一目标？

非常感谢您

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

见小提琴 I have a responsive bootstrap grid which I want to be shown in a different order depending on the device width.

sm or lower:

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

md or higher:

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

My problem is that col-pull and col-push only moves the column to the sides, not up and down.

This is what I have so far:

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

, which displays correctly in small displays but on big ones it displays as the following:

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

I would need to swap first and second rows, and swap the column 3 with column 6. How can I achieve this?

Thank you very much

解决方案

You may not have to duplicate all elements, just the ones you want to hide/show. Something along the lines of:

<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

这篇关于Bootstrap网格拉/推行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！