css - 小型设备的重新排序列

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

但是……它不工作。请告诉我如何使用 css 代码和重新排序列来解决此问题，提前谢谢 P.S - 我不对 Bootstrap 一无所知

Answer 1

只需更改第一列的 float 。对于这个 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>