Question

有没有办法在移动设备和平板电脑中使用以下顺序在Bootstrap中设置网格？

| 1 | 2 |
| 3 | 2 |
|   | 2 |

变为：

| 1 |
| 2 |
| 2 |
| 2 |
| 3 |

但现在是：

| 1 |
| 3 |
| 2 |
| 2 |
| 2 |

第二列比1和3长得多，如果我做两行，则第3项低于第二项，因为它位于第二行，并且在1之后有很多空格。我正在尝试把2件物品放在手机和平板电脑的第1件物品下面。

如果我只列出手机和平板电脑中的所有内容，那就是1,3和2。

Answer 1

这段代码可以帮到你：

http://jsfiddle.net/d5DH2/3/

<div class="content">
    <div class="bordered col-1">Column 1</div>
    <div class="content-right">
        <div class="bordered col-2">Column 2</div>
        <div class="bordered col-2">Column 2</div>
        <div class="bordered col-2">Column 2</div>
    </div>    
    <div class="bordered col-3">Column 3</div>
</div>


body{
    margin: 0 ;
    padding: 0;
}

.bordered{
    min-height: 25px;
    border: 1px solid #333;
    padding: 10px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-bottom: 10px;
}

.col-1{
    float: left;
    width: 50%;
}

.col-3{
    float:left;
    width: 50%;
}

.content-right{
    float:right;
    width: 50%;
}

@media screen and (max-width: 991px){
   .content-right,
   .col-3,
   .col-1{
       float: none;
       width: auto;
    }
}

Answer 2

的CSS：

<style type="text/css">
@media (min-width: 768px) { .col-sm-6:nth-child(2){float:right;} }
</style>

HTML：

<div class="container">

    <div class="row">

        <div class="col-sm-6">1</div>
        <div class="col-sm-6">2<br>2<br>2<br></div>
        <div class="col-sm-6">3</div>


    </div>  
</div>

请参阅：http://bootply.com/103494

将第二列放在第一列第一项下面

2 个答案: