Question

当我在webbrowser中查看此代码时，它显示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

你的HTML标记错了，它应该是这样的：

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

如果你想要col-md-2，那么最后一个应该是这样的：

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

Answer 2

我会像这样改变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（给你当前的效果），然后对于较小的屏幕，你可以删除花车

Answer 3

在引导程序代码中尝试此代码。你可以修改。

<div class="row">
<div class="col-md-6 col-md-push-3">Secon</div>
<div class="col-md-3 col-md-pull-9">First</div>
</div>

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

3 个答案: