Question

我有三个div，如图中所描述...我想改变div的位置，因为它们响应...

有可能这样做吗？怎么样？

 <div class="container-fluid">
       <div class="row">
           <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
           <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
           <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
       </div>
   </div>

Answer 1

<div class="container-fluid">
       <div class="row">
           <div class="first col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
           <div class="second col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
           <div class="third col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
       </div>
   </div>



    @media only screen and (max-width:990px) and (min-width:320px){
         .first, .third{
           float:left;
           width:48%; 
        }
        .second {
          width:100%;
          float:right;
           display:block;
          clear:both;
        }
       }

Answer 2

通过使用Bootstrap默认值，您只需添加一些额外的类来推送和拉取列。

<div class="container-fluid">
   <div class="row">
       <div class="col-sm-4 col-xs-6 text-center"><h3 class="border">Div-1</h3></div>
       <div class="col-sm-4 col-xs-6 col-sm-push-4 text-center"><h3 class="border">Div-3</h3></div>
       <div class="col-sm-4 col-xs-12 col-sm-pull-4 text-center"><h3 class="border">Div-2</h3></div>
   </div>

重点是将第3列移动到使用第2列的交换位置，因为第2列将在移动到底部时位于底部。使用.col-sm-pull和.col-sm-push将授予您轻松移动列的功能，而不会使用不必要的浮动样式或任何其他内容破坏任何内容。

请参阅Bootstrap's official guide to column ordering。

Answer 3

这有效，

 <div class="container-fluid">
       <div class="row">
           <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
           <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
           <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
       </div>
   </div>

Answer 4

如果您的元素没有任何唯一ID或类，则可以使用http://www.w3schools.com/cssref/sel_nth-child.asp。和

float: right;

只要

@media only screen and (max-width: 990px) and (min-width:320px)

Answer 5

<div class="container-fluid">
  <div class="row">
           <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center">
            <h3 class="border">Div-1</h3>
           </div>
           <div class="hidden-sm hidden-xs col-md-4 col-lg-4 text-center">
            <h3 class="border">Div-2</h3>
           </div>
           <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center">
            <h3 class="border">Div-3</h3>
           </div>
           <div class="hidden-lg hidden-md col-xs-12 col-sm-12 visible-sm-block visible-xs-block text-center">
            <h3 class="border">Div-2</h3>
           </div>
  </div>
</div>

http://getbootstrap.com/css/#responsive-utilities

如何在响应中更改div的位置？

5 个答案: