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

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

  •  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;
            }
        }
    
    推荐文章