为小型设备重新排序列

时间:2016-05-21 14:36:40

标签: css

我遇到这个问题:网站页面每行有几行 - 2列,我想重新排序小设备的位置。 第1行:A和B. 第2行:C和D. 第3行:E和F. 第4行:G和H. 这个订单: 第1行:A和B(无变化) 第2行:D和C(位置开关) 第3行:E和F(无变化) 第4行:H和G(位置开关)

所以我给我的专栏第2行--D和第4行-H 类名:my-content 我使用这个css代码:

@media (min-width: 650px) {
  .my-content {
    float: left;
  }
}

但是...... s not working. Please tell me how to fix this with css code and reorder columns, thank you in advance P.S - I don对Bootstrap

一无所知

2 个答案:

答案 0 :(得分:1)

只需更改第一列的浮动即可。对于这个HTML:

<div class="container switch-positions">
    <div class="row">
        <div class="col-xs-6">
            A
        </div>
        <div class="col-xs-6">
            B
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            C
        </div>
        <div class="col-xs-6">
            D
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            E
        </div>
        <div class="col-xs-6">
            F
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            G
        </div>
        <div class="col-xs-6">
            H
        </div>
    </div>
</div>

您可以使用此CSS:

@media (max-width: 650px) {
    .switch-positions > .row:nth-child(2n) > .col-xs-6:first-child {
        float: right;
    }
}

this Fiddle上查看,或运行以下代码段:

@media (max-width: 650px) {
    .switch-positions > .row:nth-child(2n) > .col-xs-6:first-child {
        float: right;
    }
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container switch-positions">
    <div class="row">
        <div class="col-xs-6">
            A
        </div>
        <div class="col-xs-6">
            B
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            C
        </div>
        <div class="col-xs-6">
            D
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            E
        </div>
        <div class="col-xs-6">
            F
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            G
        </div>
        <div class="col-xs-6">
            H
        </div>
    </div>
</div>

答案 1 :(得分:0)

您可以使用flexbox:codepen

您可以通过收缩小于800px宽度的浏览器设备进行测试

此处的关键属性为order

@media screen and (max-width: 800px)
  .col
    flex-flow column nowrap
  .swap
    order 1