响应设计 - 用css重新排列元素位置 [英] Responsive Design - Rearrange element positions with css

问题描述

我想在没有JavaScript的情况下尽可能这样做：

I would like to do this without JavaScript if possible:

我将在页面上有2个或更多的元素，我想改变页面的顺序是一定大小。我使用媒体查询，并将根据屏幕大小提供不同的CSS。
Diva应该在正常的顶部，但如果屏幕大小在480px以下，则b应该直接在a上。

I will have 2 or more elements on a page that I want to change the order of when the page is a certain size. I am using media-queries and will serve different css based on screen size. Div "a" should be at the top normally, but if the screen size is under 480px then b should be directly over a.

<div id="a" class="myDivs">Top when on desktop</div>
<div id="b" class="myDivs">Becomes top when under 480px wide screen</div>

我必须保留在mobile.css中的CSS：

The CSS that I must keep in my mobile.css:

.myDivs {
  width: 100%;
}

因此，我不能简单地定位绝对并设置margin-top或top。

So the height is not specified; therefore, I can't simply position absolute and set margin-top or top.

推荐答案

独立性。坏消息是，到今天为止，你是一种运气没有得到超级kludgy（读：移动DOM与JS或类似的东西）。好消息是，帮助正在以 CSS的形式出现

You're talking about source-order independence in terms of presentation. The bad news is that as of today, you're kind of out of luck without getting super kludgy (read: moving the DOM around with JS or something similar). The good news is that help is on the way in the form of CSS Flexbox - check out "ordering" on that page.

其他资源：

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes

http：// css-tricks .com / old-flexbox-and-new-flexbox /

这篇关于响应设计 - 用css重新排列元素位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！