CSS 让第一个 div 放在最后，如果媒体全部

Question

当我在网络浏览器中查看这段代码时，它显示 div 很好。

<div class="container">
<div class="row">
<div class="col-md-2 white">
<div class="col-md-2 white80">
<div class="col-md-8 white">
<div class="col-md-8 white">
</div>
</div>

但是当我在手机或平板电脑上查看它时，它会将第一个 div col-md-2 放在错误的位置，我希望这个 div 最后显示。

有没有办法在 CSS 中做到这一点？

Answer 1

我会像这样更改您的 div 的结构:

<div class="container">
   <div class="row">
     <div class="wrapper">
         <div class="col-md-2 white80"></div>
         <div class="col-md-8 white"></div>
         <div class="col-md-8 white"></div>
     </div>
     <div class="col-md-2 white"></div>
   </div>
</div>

然后在大屏幕的媒体查询中，将包装器向右浮动，将最后一个 col-md-2 向左浮动(为您提供当前效果)，然后对于较小的屏幕，您可以删除 float