如何更改从桌面到手机的按钮显示顺序？

Question

我有如下按钮：

<button>cancel</button>
<button>submit</button>

cancel按钮位于左侧，提交位于右侧。在移动视图方面，我必须在顶部显示submit，在底部显示cancel。我怎样才能做到这一点？

以下是我的示例：http://plnkr.co/edit/BpTrv6aI5xDCBNddUPj1?p=preview

Answer 1

当您达到某个阈值时，您可以使用媒体查询来更改按钮的显示：

@media screen and (max-width: 480px) {
    button {
        display: block;
    }
}

将按钮显示为block会将它们显示在另一个上面。

Answer 2

你可以交换按钮并将它们浮在桌面上，然后在移动设备上给它们全宽：

<button class="pull-right">submit</button>
<button class="pull-left">cancel</button>

这个CSS应该在桌面上：

.pull-right {
    float:right;
}

.pull-left {
    float:left;
}

Answer 3

以下是将按钮的显示顺序从移动设备更改为桌面的解决方案

<http://plnkr.co/edit/JQS9vQRIeHgLC5EtCkDh?p=preview>