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

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

通过使用 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>

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

引用Bootstrap's official guide to column ordering .