css - 如果访客在移动设备上，切换 2 个 div

Question

我的桌面情况:

我的移动设备情况:

我想要的移动设备情况:

在这种情况下有什么 CSS 技巧可以应用吗？

Answer 1

Although I think this a problem test tackled with jquery. This is how I would do it with CSS

<div class="div-one"></div>
<div class="div-two"></div>




div-one {
       height:150px;
       display:inline-block;
       float:left
       width:50%;
       background-color:red;

   }

.div-two {
    display:inline-block;
    height:150px;
    width:50%;
    background-color:blue;

   }

   @media only screen and (max-width : 480px) {
     .div-two {
       position:absolute;
       float:none;
       display:block;
       top:0px;
       width:100%;
       height:150px;
  }
  .div-one {
    float:none;
    display:block;
    width:100%;
    height:150px;
    margin-top:150px;
  }
} 

这是我的例子:http://codepen.io/anon/pen/hdLDe