如何更改并排div在移动设备上堆叠？

我试图让我的2个divs（并排）在手机上查看时转换为堆叠的div，如小提琴中所示，但我希望“两个在上面，”一个“在第二个上面。如何更改并排div在移动设备上堆叠？

.one { 
 
    border: 1px solid green; 
 
    width: 29%; 
 
    float: left; 
 
    height: 100px; 
 
} 
 

 
.two { 
 
    border: 1px solid blue; 
 
    width: 69%; 
 
    float: right; 
 
    height: 100px; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .one { 
 
    width: 100%; 
 
    } 
 
    .two { 
 
    width: 100%; 
 
    } 
 
}

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

我知道简单的解决办法是将各地的交换的div一个和两个，但因为我的代码是复杂的，我希望有一个简单的解决方案，只使用CSS。

来源

2015-07-10 DevStacker

交换在HTML的div的秩序，它会在不改变任何你的CSS的工作 - 演示... HTTP：//的jsfiddle。 net/d3d4hb3t/1/ – Turnip

只是交换，它会比其他任何东西都容易。 – aahhaa

更新

增加了Flexbox的方法如下：

UPATED JSFIDDLE

.wrap { 
 
    display: flex; 
 
} 
 

 
.one { 
 
    width: 30%; 
 
    border: 1px solid green; 
 
} 
 

 
.two { 
 
    width: 70%; 
 
    border: 1px solid blue; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .wrap { 
 
    flex-direction: column-reverse; 
 
    } 
 
    .one, 
 
    .two { 
 
    width: auto; 
 
    } 
 
}

<div class="wrap"> 
 
    <div class="one">1</div> 
 
    <div class="two">2</div> 
 
</div>

原来的答复

如果你坚持的标记，你仍然可以使用魔法的CSS表格布局改变2周的div的顺序。我更新了所有内容，只是为了保持一致性。

那些display值是如何工作的，从MDN：

display: table; - 行为就像<table>元素。

display: table-cell; - 表现得像<td>元素。

display: table-header-group; - 表现得像<thead>元素。

display: table-footer-group; - 表现得像<tfoot>元素。

UPDATED JSFIDDLE

.wrap { 
 
    display: table; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
.one, 
 
.two { 
 
    display: table-cell; 
 
} 
 

 
.one { 
 
    width: 30%; 
 
    border: 1px solid green; 
 
} 
 

 
.two { 
 
    width: 70%; 
 
    border: 1px solid blue; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .one { 
 
    display: table-footer-group; 
 
    width: 100%; 
 
    } 
 
    .two { 
 
    display: table-header-group; 
 
    width: 100%; 
 
    } 
 
}

<div class="wrap"> 
 
    <div class="one">1</div> 
 
    <div class="two">2</div> 
 
</div>

来源

2015-07-10 15:04:20 Stickers

正是我需要的，谢谢 – DevStacker

考虑到你不想交换它们。这里是小提琴：https://jsfiddle.net/c8x49afg/ 只需使用位置相对divs拉第二和第一下。

HTML

<div class="wrapper"> 
<div class="one" > 
one  
</div> 


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

CSS

.wrapper { 
} 
.one{ 
    border: 1px solid green; 
    width: 29%; 
    float:left; 
    height:100px; 
} 


.two{ 
    border: 1px solid blue; 
    width:69%; 
    float:right; 
    height:100px; 
} 

@media (max-width:767px) { 
    .one{ 
     position:relative; 
     top:110px; 
     width:100%; 
} 
    .two{ 
     position:relative; 
     top:-100px; 
     width:100%; 
} 
}

来源

2015-07-10 15:02:22

在一个企业CMS在源订单无法移动而改变工作时，我都需要做这个确切的事情。

我使用的解决方案是为两个Div设置一个通用容器，并将该显示设置为表格。然后，您可以设置在div你想先为display:table-group-header显示和设置一个显示后，为display:table-group-footer

如果你想保持颜色的边框，您可能需要为每条内的div握着你的内容。

我创建了一个小提琴，显示它在行动： http://jsfiddle.net/0brc4xc7/

来源

2015-07-10 15:17:46 CreMedian

如何更改并排div在移动设备上堆叠？

回答

相关问题