изменить порядок отображения через css - PullRequest
Новая
       1

изменить порядок отображения через css

0 голосов
/ 23 апреля 2019

У меня есть фрагмент кода, основанного на начальной загрузке: 

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

то есть на большом экране: имя, сводка, дата , на маленьком экране имя, дата, сводка .

Возможно ли это

1 Ответ

0 голосов
/ 23 апреля 2019

пожалуйста, попробуйте этот код 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...