我有这个简单的布局。不确定为什么手机的媒体屏幕会覆盖我的主css。笔记本电脑尺寸显示为橙色，手机尺寸显示为黄色。
/* main container */
#resume {
padding: 1rem;
margin-top: 2rem;
background-color:silver;
}
.parent {
display: flex;
flex-flow: column nowrap;
background-color:yellow;
}
/****************
* PHONE
****************/
@media screen and (min-width: 460px) {
#resume {
width: 95%;
margin: 0px auto;
}
.display {
max-width: 180px;
}
.child {
flex: 100%;
background-color:orange;
}
.topper {
order: -1;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title>Steve</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="resume">
<div class="parent">
<div class="child wider">
<header class="clear" id="header">
<div>
<h1 class="name">Steve</h1>
<h2 class="label">Programmer</h2>
</div><span class="location"><span class="address">2712 Broadway St,</span> <span class="postalCode">CA 94115,</span> <span class="city">San Francisco,</span> <span class="region">California</span> <span class="countryCode">US</span></span>
<div id="contact">
<div class="website">
<span class="fa fa-external-link"></span> <a href="http://richardhendricks.com" target="_blank">http://richardhendricks.com</a>
</div>
<div class="email">
<span class="fa fa-envelope-o"></span> <a href="mailto:richard@valley.com">richard@valley.com</a>
</div>
<div class="phone">
<span class="fa fa-mobile"></span> <a href="tel:(912)%20555-4321">(912) 555-4321</a>
</div>
</div>
<div id="profiles">
<div class="item">
<div class="username">
<span class="fa fa-twitter twitter social"></span> <span>neutralthoughts</span>
</div>
</div>
<div class="item">
<div class="username">
<span class="fa fa-soundcloud soundcloud social"></span> <span class="url"><a href="https://soundcloud.com/dandymusicnl" target="_blank">dandymusicnl</a></span>
</div>
</div>
</div>
</header>
</div>
<div class="child topper">
2
</div>
</div>
</div>
</body>
</html>我认为手机屏幕的CSS应该设置最大宽度，而不是最小宽度。尝试：
@media screen and (max-width: 460px)
以上CSS适用于屏幕宽度小于460px的情况。
因为您的代码都在桌面上工作，并且media查询在文件中，所以它在之后执行
试试这个
/* main container */
/****************
* PHONE
****************/
#resume {
width: 95%;
margin: 0px auto;
}
.display {
max-width: 180px;
}
.child {
flex: 100%;
background-color:orange;
}
.topper {
order: -1;
}
@media screen and (max-width: 460px) {
#resume {
padding: 1rem;
margin-top: 2rem;
background-color: silver;
}
.parent {
display: flex;
flex-flow: column nowrap;
background-color: yellow;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title>Steve</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="resume">
<div class="parent">
<div class="child wider">
<header class="clear" id="header">
<div>
<h1 class="name">Steve</h1>
<h2 class="label">Programmer</h2>
</div><span class="location"><span class="address">2712 Broadway St,</span> <span class="postalCode">CA 94115,</span> <span class="city">San Francisco,</span> <span class="region">California</span> <span class="countryCode">US</span></span>
<div id="contact">
<div class="website">
<span class="fa fa-external-link"></span> <a href="http://richardhendricks.com" target="_blank">http://richardhendricks.com</a>
</div>
<div class="email">
<span class="fa fa-envelope-o"></span> <a href="mailto:richard@valley.com">richard@valley.com</a>
</div>
<div class="phone">
<span class="fa fa-mobile"></span> <a href="tel:(912)%20555-4321">(912) 555-4321</a>
</div>
</div>
<div id="profiles">
<div class="item">
<div class="username">
<span class="fa fa-twitter twitter social"></span> <span>neutralthoughts</span>
</div>
</div>
<div class="item">
<div class="username">
<span class="fa fa-soundcloud soundcloud social"></span> <span class="url"><a href="https://soundcloud.com/dandymusicnl" target="_blank">dandymusicnl</a></span>
</div>
</div>
</div>
</header>
</div>
<div class="child topper">
2
</div>
</div>
</div>
</body>
</html>