使用CSS在窗口较小时替换div

Question

我有两个div，一个带有文本电话号码，另一个带有电话按钮图形。我希望较大的数字消失，并在窗口尺寸较小时用较小的图形替换。我有三个样式表：

<link rel="stylesheet" media="(max-width: 620px)" href="mobile0.css">
<link rel="stylesheet" media="(max-width: 840px)" href="mobile1.css">
<link rel="stylesheet" media="(min-width: 840px)" href="mobile2.css">

mobile2.css适用于大型展示，mobile1.css适用于平板电脑，mobile0.css适用于手机。

由于mobile2.css和mobile1.css相同，我会展示mobile2.css和mobile0。

mobile2.css中的div：

.phone_remove {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 220%;
    font-weight: bold;
    color: #407595;
    float: right;
    margin-right: 10px;
    margin-top: 2px;
    margin-bottom: 4px;
}

.phone_button {
    display: none;
}

mobile0.css中的div：

.phone_remove {
    display: none;
}

.phone_button {
    display: inline-block;
}

电话号码按预期消失，但电话按钮不会出现。

HTML：

<div class="phone_button"><a href="tel:760-471-1700">
    <img src="images/phone_us.jpg" width="100%" border="0"/></a></div>
<div class="phone_remove">760.471.1700</div>