Question

我遇到这个问题：网站页面每行有几行 - 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

一无所知

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

Answer 2

您可以使用flexbox：codepen

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

此处的关键属性为order

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

为小型设备重新排序列

2 个答案: