时间戳

首页 > 解决方案 > 如何使用引导程序 3 更改 div 顺序？

twitter-bootstrap - 如何使用引导程序 3 更改 div 顺序？

问题描述

我正在使用引导程序 3。我的问题是在较小的屏幕上更改某些 div 的顺序。

我的正常代码是：

 <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>A</p>
      </div>
      <div class="col-md-6">
        <p>B</p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <p>C</p>
      </div>
      <div class="col-md-6">
        <p>D</p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <p>E</p>
      </div>
      <div class="col-md-6">
        <p>F</p>
      </div>
    </div>
  </div>

输出是：

AB

光盘

英孚

我想要它在小（col-sm-12）屏幕中，如下所示

一个

D

C

乙

乙

F

如何做到这一点？谢谢你。

标签： twitter-bootstrapcsstwitter-bootstrap-3

解决方案

您需要更改 HTML 并使用display: flexto.row并下达命令.col

@media (max-width: 1199px) {
  .changeOrder {
    display: flex;
    flex-direction: column;
  }
  .changeOrder .one {
    order: 1;
  }
  .changeOrder .two {
    order: 2;
  }
  .changeOrder .three {
    order: 3;
  }
  .changeOrder .four {
    order: 4;
  }
  .changeOrder .five {
    order: 5;
  }
  .changeOrder .six {
    order: 6;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row changeOrder">
  <div class="col-lg-6 one">
    <p>A</p>
  </div>
  <div class="col-lg-6 five">
    <p>B</p>
  </div>
  <div class="col-lg-6 three">
    <p>C</p>
  </div>
  <div class="col-lg-6 two">
    <p>D</p>
  </div>
  <div class="col-lg-6 four">
    <p>E</p>
  </div>
  <div class="col-lg-6 six">
    <p>F</p>
  </div>
</div>

推荐阅读