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

Question

I have three divs as described in the image...i want to change the location of divs as they go responsive...

Is it possible to do so? and how?

 <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

By using the Bootstrap defaults you would like to push and pull columns by simply adding some additional classes to them.

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

The point is to move the 3rd col to swap places with the 2nd col , since the 2nd will be at the bottom when it goes down to mobile. Using .col-sm-pull and .col-sm-push will grant you the ability to move columns around easily without breaking anything with unnecessary float styling or anything else.

Refer to Bootstrap's official guide to column ordering .

Answer 3

This works,

 <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

You could use http://www.w3schools.com/cssref/sel_nth-child.asp if your element hasn´t any unique id or class. and

float: right;

As long as

@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