通过 CSS 更改显示顺序

我有一段基于引导的代码：

<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>

相关内容

最新更新

热门标签：