我想让我的桌面友好型网站也适合移动设备。
这就是它在移动设备上的外观。
这就是我希望它寻找移动用户的方式。
这种布局背后的原因是它在桌面上看起来不错，每行有 2 列。
网页代码：
<html>
<div class="outer-container">
<div class="inner-container">text</div>
<div class="inner-container">img</div>
</div>
<div class="outer-container">
<div class="inner-container">img</div>
<div class="inner-container">text</div>
</div>
<div class="outer-container">
<div class="inner-container">text</div>
<div class="inner-container">img</div>
</div>
</html>
css 代码：
.outer-container{
width:100%;
}
.inner-container{
float:left;
width:50%;
}
@media screen and (max-width:480px){
.inner-container{
width:100%;
}
}
您可以使用flex来执行此操作。创建一个column，并使用子项上的order属性根据需要重新组织。
.outer-container{
width:100%;
}
.inner-container{
float:left;
width:50%;
}
@media screen and (max-width:480px){
.inner-container{
width:100%;
}
.outer-container {
display: flex;
flex-direction: column;
}
.t {
order: -1;
}
}<html>
<div class="outer-container">
<div class="inner-container t">text</div>
<div class="inner-container i">img</div>
</div>
<div class="outer-container">
<div class="inner-container i">img</div>
<div class="inner-container t">text</div>
</div>
<div class="outer-container">
<div class="inner-container t">text</div>
<div class="inner-container i">img</div>
</div>
</html>