Question

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

<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

即日期在第三行，并弹出“警报”框的背景。

我希望它在手机屏幕上是这样的

Name                                       Date
Summary, ....
... ...

即在大屏幕上：名称，摘要，日期，在小屏幕上，名称，日期，摘要。

有可能

Answer 1

请尝试使用此代码

<!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更改显示顺序

1 个答案: