缩放时重新排列div

当我缩小窗口时，是否可以“重新排列”我的div-blocks？例如，如果红色div出现在蓝色div之前，当我缩小到0-770px宽度的窗口。但是当窗户最小时。 771px，蓝色div应该出现在红色div之前。缩放时重新排列div

林不知道这是可能的，但没有javascript的解决方案是deffintly更可取。

谢谢！

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
#wrapper { 
 
    width: 1000px; 
 
    height: auto; 
 
    background-color: grey; 
 
} 
 

 
#boks-green { 
 
    width: 50%; 
 
    background-color: green; 
 
    height: 400px; 
 
    display: block; 
 
    float: left; 
 
} 
 

 
#boks-blue { 
 
    width: 50%; 
 
    background-color: deepskyblue; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
#boks-red { 
 
    width: 50%; 
 
    background-color: red; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
#boks-purple { 
 
    width: 50%; 
 
    background-color: purple; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
@media only screen and (max-width: 770px) { 
 
    #boks-green { 
 
    width: 100%; 
 
    background-color: green; 
 
    height: 400px; 
 
    display: block; 
 
    float: left; 
 
    } 
 
    #boks-blue { 
 
    width: 100%; 
 
    background-color: deepskyblue; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    } 
 
    #boks-red { 
 
    width: 100%; 
 
    background-color: red; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    } 
 
    #boks-purple { 
 
    width: 100%; 
 
    background-color: purple; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div id="boks-green"> 
 
    </div> 
 

 
    <div id="boks-blue"> 
 
    </div> 
 

 
    <div id="boks-red"> 
 
    </div> 
 

 
    <div id="boks-purple"> 
 
    </div> 
 

 
</div>

来源

2017-08-07 Adrian Kirkegaard

这可以通过[flexbox and order]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-9）来实现。 – jrenk

可能有[只用CSS交换DIV位置]的副本（https://stackoverflow.com/questions/17455811/swap-div-position-with-css-only） – rblarsen

有浮动和已知高度，可以玩块格式化上下文和交换红色和蓝色框https://codepen.io/anon/pen/dzNBdL清除和溢出 –

如果你可以考虑使用flexbox，这是时下quite well supported，你可以很容易地做到这一点。

首先，您需要媒体查询，然后如果您的容器是容器flex，则可以使用儿童的order属性来选择要显示元素的位置。

所以我会用：

#boks-blue { 
order: 1; 
} 

#wrapper { 
    display: flex; 
    flex-direction: column; 
}

媒体查询内。

您可以了解更多关于弹性盒here或者您可以以非常互动的方式深入挖掘here。

来源

2017-08-07 13:47:45 MisterJ

但是，当包装是“显示器：弯曲”我的div不相互下，但对齐水平 –

您可以更改这与包装的'flex-direction'有关。它可以使用'row'（默认），'column'，'row-reverse'和'column-reverse'值。所以你应该把它放在'flex-direction：column'上。我在主要答案上添加了一些文档。 – MisterJ

@AdrianKirkegaard如果这个解决方案解决了你的问题，你应该接受它。 – MisterJ

缩放时重新排列div

回答

相关问题