Question

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

我的常规代码是：

UID

output是：

A B

CD

E F

我想要在较小的（col-sm-12）屏幕中显示

A

D

C

E

B

F

如何实现？谢谢。

Answer 1

您需要更改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>

Answer 2

好吧，使用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;
        }
    }

如何使用Bootstrap 3更改div顺序？

2 个答案: