我在一行中有3个div，如何在移动设备中使中间div排在第一位，第二个div排在第一位，第三个div排在最后？

Question

I have 3 divs in one row, how do I get the middle div comes first and first div comes in second and third div come last in mobile?

<div class="first">hello first</div>
<div class="middle">hello Middle</div>
<div class="last">hello last</div>

.first {float:left; width:33%;}

.middle {float:left; width:33%;}

.last {float:left; width:33%;}

Answer 1

If you're using Bootstrap as per you question, there's also a way to specify div ordering on per breakpoint basis, using Bootstrap's pull/push classes. Assumed you set the right order as it should be on mobile, first:

<div class="row">
  <div class="middle col-md-4 col-md-push-4 col-sm-4">hello middle</div>
  <div class="first col-md-4 col-sm-4 col-md-pull-4 ">hello first</div>
  <div class="last col-md-4 col-sm-4">hello last</div>
</div>

http://jsfiddle.net/ximes/dw8n36jj/

See: http://getbootstrap.com/css/#grid-column-ordering for more info/examples.

Answer 2

• If you give float:left to all these divs, they will display respectively in the order they are written in your HTML.
• To make divs display in a one row you need to display them as inline-block because they are dispalyed as block by default.

Solution:

You just need to remove float:left; from first and last elements and use display:inline-block with all these divs, it will give you the expected results even on mobile.

Demo:

This is a sample working Demo:

 .first { display: inline-block; width: 33%; } .middle { display: inline-block; ; float: left; width: 33%; } .last { display: inline-block; width: 33%; } 

 <div class="first">hello first</div> <div class="middle">hello Middle</div> <div class="last">hello last</div> 

Answer 3

You don't need the extra CSS to set the widths. Just use the Bootstrap grid and column ordering..

http://www.codeply.com/go/eMKtd3qzYU

<div class="container">
    <div class="row">
        <div class="middle col-sm-4 col-sm-push-4">hello Middle</div>
        <div class="first col-sm-4 col-sm-pull-4">hello first</div>
        <div class="laste col-sm-4">hello last</div>
    </div>
</div>

Answer 4

<div class="first">hello first</div>
<div class="middle">hello Middle</div>
<div class="last">hello last</div>
.first {display:inline-block; width:33%;}
.middle {float:left; width:33%;}
.last {display:inline-block; width:33%;}

https://jsfiddle.net/gaLo5s1o/

Answer 5

如果使用的是引导，然后使用col-sm-push-4的第二div和col-sm-pull-4的第一div

Answer 6

Here is a sample code using flexbox approach .

 .parent{ display:flex; flex-direction:row;} .parent div{ height:200px;width:33%;} .first { background:red;} .middle { background:yellow;} .last { background:blue;} @media screen and (max-width: 768px) { .parent { flex-direction: row; } .parent div{ width:100%; } .first { order: 2; } .second{ order: 1; } .third{ order:3} } 

 <div class="parent"> <div class="first">hello first</div> <div class="middle">hello Middle</div> <div class="last">hello last</div> </div>