Html 如何在responsive中更改div的位置？

我有三个div，如图所示…我想在div移动时更改它们的位置

有可能吗？怎么做

第一组
第2组
第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>

第一组
第2组
第3组

如果元素没有唯一的id或类，则可以使用。 及

只要

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

第一组
第2组
第3组
@仅介质屏幕和（最大宽度：990px）和（最小宽度：320px）{
.第一，第三{
浮动：左；
宽度：48%；
}
.第二{
宽度：100%；
浮动：对；
显示：块；
明确：两者皆有；
}
}

第一组
第2组
第3组
第2组

---

通过使用引导默认值，只需向列中添加一些附加类，即可推拉列

<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组

关键是移动第三列以与第二列交换位置，因为第二列在移动时位于底部。使用

.col-sm pull

和

和

将使您能够轻松地移动列，而不会破坏任何不必要的浮点样式或其他内容

---

请参阅。

这将导致开发人员两次填写相同的内容，这并不理想。但除了向css文件中添加更多代码外，这非常有用。您可以使用bootstrap的默认css类使列交换位置，因此不需要额外的css代码。尽管您的断点不常见，你可能想调整这些CSS属性的默认设置，或者如果这是你网站的常见断点，就覆盖它们。这个概念对我有帮助，但答案在这里

Div-1 Div-3Div-2

是的，断点和列顺序通常取决于您的喜好，很高兴看到您解决了它！：）快乐编码！

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

<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;
        }
       }

<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>

<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>