代码之家 › 专栏 › 技术社区 › Priyank Dey

如何使用bootstrap 3更改DIV顺序?

twitter-bootstrap-3 css3 twitter-bootstrap css

0

Priyank Dey · 技术社区 · 7 年前

我正在使用引导程序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>

这个 output 是:

甲

Cd

EF

我想要小屏幕的(col-sm-12)如下

一

D

C

e

乙

f

如何做到这一点?谢谢您。

2 回复 | 直到 7 年前

1

2

Tushar 7 年前

您需要更改HTML并使用 display: flex 到 .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>

2

1

CodeZombie 7 年前

嗯,用 flex 和 order 用于对元素排序。可以根据媒体查询中的视区更改其子元素的顺序。

    <div class="col-md-6 a">
             A
    </div>

    <div class="col-md-6 b">
             B
    </div>

    <div class="col-md-6 c">
             C
    </div>

    <div class="col-md-6 d">
             D
    </div>

    <div class="col-md-6 e">
             E
    </div>

    <div class="col-md-6 f ">
             F
    </div>

</div>

CSS

   .container {
        display: flex;
        flex-wrap: wrap;
    } 

    @media screen and ( max-width: 800px) {
        .a {
            order: 1;
        }
        .b {
            order: 5;
        }
        .c {
            order: 3;
        }
        .d {
            order: 2;
        }
         .e {
            order: 4;
        }
         .f{
            order: 6;
        }
    }