Question

有人可以帮我用html重新排序下面的列使用bootstrap 3：

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

对此：

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

我知道这与推/拉有关，我似乎无法做到正确。

修改

我无法上班的som代码：

<div class="row">
    <div class="col-md-8 col-xs-12">2</div>
    <div class="col-md-2 col-xs-12 col-md-push-2">1</div>
    <div class="col-md-8 col-xs-12 col-md-pull-2">3</div>
</div>

在移动设备上，它看起来不错但不在桌面上。

解决方案

<div class="row">
    <div class="col-md-8 col-xs-12 col-md-push-2">2</div>
    <div class="col-md-2 col-xs-12 col-md-pull-8">1</div>
    <div class="col-md-8 col-xs-12">3</div>
</div>

Answer 1

这非常简单，关键是我们无法在移动模式下重新排序列。我们应该首先将其视为移动设备，然后使用.col-*-push-#，.col-*-pull-#辅助类重新排序大屏幕上的列：

.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="red col-sm-4 col-sm-push-4">2</div>
        <div class="green col-sm-4 col-sm-pull-4">1</div>
        <div class="blue col-sm-4">3</div>
    </div>
</div>

Answer 2

为每个使用自定义类并使用弹性框CSS概念。

<强> HTML

<div class="row">
  <div class="col-md-4 one">First box</div>
  <div class="col-md-4 two">Second Box</div>
  <div class="col-md-4 three">Third Box</div>
</div>

<强> CSS

.row {
  display: flex;
  flex-direction: column;
}

.one {
  order: 2;
}

.two {
  order: 1;
}

.three {
  order: 3;
}

Codeply

使用bootstrap重新排序3

2 个答案: