媒体查询使元素表现奇怪

Question

我遇到了这个让我发疯的错误。基本上我有两个并排的按钮，当我将尺寸缩小到移动屏幕然后备份时，按钮不再并排。相反，它们的行为就好像其中一个按钮不再浮动一样。当我检查控制台时，该元素已经恢复了浮动属性但它实际上并没有被应用，因此按钮并排出现..

有谁知道这可能是什么原因造成的？我到底该如何解决？已经玩了几个小时了，但没有运气。

编辑： 设法重新创建错误：http://plnkr.co/edit/mbo2f0Xg9lkGou9sx8jl?p=preview

#topics-button-wrapper {
    float: right;
    margin-top: 2px;

    @media screen and (max-width: 600px) {
        float: none;
        display: block;
    }

    > button {

        &:first-of-type {
            float: left;
            margin-right: 10px;
        }

        &:last-of-type {
            float: right;

            @media screen and (max-width: 600px) {
                float: none; //Seem to be keeping this even though it applies 'float: right'
            }
        }
    }
}

标记：

<span class="main-topic">
    <a ng-href="#/{{topic.name}}" ng-bind="topic.name"></a>
    <div class="clear-fix" id="topics-button-wrapper">
        <button data-my-new-topic-slide class="bg-delay button filled round narrow-button">New topic</button>
        <button class="button plain round narrow-button">Statistics</button>
    </div>
</span>