我试图得到“通心粉和奶酪真的很好吃！”在“网站的主要内容”下方。
#content {
padding: 0;
background: 0;
float: none;
width: auto;
}
.heading {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
#content h1 {
text-align: left;
width: 100%;
float: none;
margin: 0 0 10px;
font: 2.538em/1.3em;
color: #393939;
}
#content .text {
order: 1;
}
<div id="content">
<div class="heading">
<h1>Mac and Cheese</h1>
<div class="text">
<p>Mac and cheese is really yum!</p>
</div>
</div>
<div class="main-content">
The main content of the site</div>
</div>
http://codepen.io/anon/pen/KMPydJ
如有任何帮助，我们将不胜感激——谢谢！
The CSS order财产仅适用于兄弟姐妹。
在您的代码中，您试图重新定位.text，它是弹性项目的子项（.heading), 出现在.main-content.
Well, .heading and .main-content是兄弟姐妹。但.text就像一个侄女.main-content， 所以order财产将无法运作。
Once .text an .main-content是兄弟姐妹，您可以实现您想要的排序。
在下面修改后的代码中，我删除了您的.heading元素。现在h1, .text and .main-content都是兄弟姐妹。
#content {
display: flex;
flex-direction: column;
}
h1 {
margin: 0 0 10px;
font: 2.538em/1.3em;
color: #393939;
}
.text {
order: 1;
}
<div id="content">
<h1>Mac and Cheese</h1>
<div class="text">
<p>Mac and cheese is really yum!</p>
</div>
<div class="main-content">The main content of the site</div>
</div>
了解更多关于order这里的财产：https://stackoverflow.com/a/36118012/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
