我有一段基于 Bootstrap 的代码:
<div class="alert alert-primary" style="padding:0.6rem;margin-bottom:0.5rem">
<div style="display:inline-block;font-weight:bold;width:100px;vertical-align:top">Name</div>
<div style="display:inline-block;vertical-align:top">Summary, which is long and will wrap on small screen</div>
<div style="display:inline-block;float:right;vertical-align:top">Date</div>
</div>
在笔记本电脑屏幕上看起来像这样:
Name Summary... Date
在手机屏幕上看起来像:
Name
Summary...
Date
即日期在第 3 行，并从“警告”框的背景中弹出。
我希望它在手机屏幕上是这样的:
Name Date
Summary, ....
... ...
即在大屏幕上:姓名、摘要、日期，在小屏幕上，姓名、日期、摘要。
这可能吗
最佳答案
请试试这个代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media(max-width: 767px){
.alert.alert-primary{
display: flex;
flex-direction: column;
}
.alert div:nth-child(1){
order: 1;
display: block !important;
}
.alert div:nth-child(2){
order: 3;
display: block !important;
}
.alert div:nth-child(3){
order: 2;
display: block !important;
}
}
</style>
</head>
<body>
<div class="alert alert-primary" style="padding:0.6rem;margin-bottom:0.5rem">
<div style="display:inline-block;font-weight:bold;width:100px;vertical-align:top">Name</div>
<div style="display:inline-block;vertical-align:top">Summary, which is long and will wrap on small screen</div>
<div style="display:inline-block;float:right;vertical-align:top">Date</div>
</div>
</body>
</html>
关于css - 通过CSS更改显示顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55811930/