英文:
How to switch button position on mobiles and tables?
问题
当在较小的设备上显示时，按钮占据整个宽度，这是预期的行为。然而，我想要的是，当这种情况发生时，Next 按钮显示在 Back 按钮的上方。这个是否可能？
英文:
I have the following snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 pt-2 d-flex flex-column flex-md-row justify-content-md-end">
<button type="button" class="btn btn-secondary mb-2 mb-md-0 mr-md-2">Back</button>
<button type="button" class="btn btn-primary">Next</button>
</div>
</div>
</div>
<!-- end snippet -->
When displayed on smaller devices, the buttons occupy the whole width. This is as expected.
However, I would like that when this happens, the Next button is displayed above the Back button.
Is this possible?
答案1
得分: 1
请尝试以下代码：
@media screen and (max-width: 767px){
.btn-secondary{
order: 1;
}
.btn-primary{
margin-bottom: 0.5rem !important;
}
}
英文:
Please try this code
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@media screen and (max-width: 767px){
.btn-secondary{
order: 1;
}
.btn-primary{
margin-bottom: 0.5rem !important;
}
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论