html - 在不使用绝对的情况下在窗口调整大小时向上移动 div

Question

假设我有这样的结构。

<div class="container>
 <div class="left-col>
   some content

 </div>

 <div class="right column>
   <div class="login-form">Login Form</div>
 </div>

</div>

以上是我的网页结构，宽度为 700px 及以上。我想做的是每当浏览器宽度减小到 480px 及以下时。div 类登录表单将位于顶部，然后位于其下方是我的左上校..有什么办法吗？我很乐意在不使用 position: absolute 的情况下这样做

如果浏览器宽度是480px，下面的结构是这样的

<div class="container>

 <div class="right column>
   <div class="login-form">Login Form</div>
 </div>

 <div class="left-col>
   some content

 </div>



</div>

Answer 1

您的 HTML 是否必须像那样，或者您可以交换它吗？这意味着 html 看起来不同，但在大屏幕上您仍然可以在右侧看到登录表单。如果 HTML 是:

<div class="container">
  <div class="right-col">
    <div class="login-form">Login Form</div>
  </div>

  <div class="left-col">
    Some Content
  </div>
</div>

然后是 CSS:

.left-col {
  background: green;
}

.right-col {
  background: red;
}

@media (min-width: 481px) {
  .container {
    overflow: hidden;
  }

  .left-col {
    overflow: hidden;
  }

  .right-col {
    float: right;
    margin-left: 10px;
  }
}

工作 fiddle :http://jsfiddle.net/jhummel/4aNjd/