Есть ли способ написания CSS, который позволяет реорганизовать порядок появления компонентов HTML?

Question

Я работаю над адаптивным сайтом, в котором представление для мобильных устройств и планшетов отличается от представления для настольных компьютеров тем, как оно переупорядочивает DIV.

Есть ли способ написания поддерживаемого CSS, который позволит вам реорганизовать порядок отображения HTML DIV?

Например, приведенный ниже код управляет порядком отображения DIV на настольном устройстве:

<div class="container">
    <div class="row1">
        <div class="col1A">Sample content</div>
        <div class="col2A">Sample content</div>
        <div class="col3A">Sample content</div>
    </div>
    <div class="row2">
        <div class="col1B">Sample content</div>
        <div class="col2B">Sample content</div>
        <div class="col3B">Sample content</div>
    </div>
</div>

Однако для просмотра на мобильных устройствах и планшетах я хочу отображать DIV в другом порядке с помощью CSS, как показано в примере ниже:

Показать row2, col2B
Тогда row1, col1A
Тогда row1, col3A
Тогда row2, col1B

Возможно ли это с помощью CSS?

Answer 1

В качестве подтверждения концепции вы можете использовать flex Свойство CSS, чтобы изменить порядок визуализации элементов.

В вашем примере мне пришлось держать дочерние элементы в одном контейнере, а затем я мог контролировать порядок, используя order имущество.

Если вы хотите скрыть некоторые элементы на маленьком экране, используйте display: none на конкретные предметы.

Примечание. Для широкого экрана вам понадобятся некоторые правила CSS, чтобы элементы выглядели как две строки. (Пожалуйста, укажите, что вам нужно.)

Если вы объедините это с медиа-запросами, вы сможете получить работоспособное решение.

.container {
  display: flex;
  flex: center;
  flex-direction: column;
  align-items: center;
  border: 1px dotted blue;
}
.container div {
  text-align: center;
  padding: 10px;
  border: 1px dotted gray;
  width: auto;
}
.col1A {
  order: 2;
}
.col2A {
  display: none;
}
.col3A {
  order: 3;
}
.col1B {
  order: 4;
}
.col2B {
  order: 1;
}
.col3B {
  display: none;
}

<div class="container">

  <div class="row1 col1A">Sample content 1A</div>
  <div class="row1 col2A">Sample content 2A</div>
  <div class="row1 col3A">Sample content 3A</div>

  <div class="row2 col1B">Sample content 1B</div>
  <div class="row2 col2B">Sample content 2B</div>
  <div class="row2 col3B">Sample content 3B</div>

</div>

Если вы хотите смоделировать две строки из трех элементов, вы все равно можете использовать flex с некоторыми корректировками. Следующее может быть полезным.

.container {
  display: flex;
  flex: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  border: 1px dotted blue;
  padding: 20px 0;
}
.container .row1 {
  margin-bottom: 20px;
}
.container div {
  text-align: center;
  padding: 10px;
  border: 1px dotted gray;
  flex-basis: calc(33% - 20px);
}
.col1B {
  background-color: yellow;

}

<div class="container">

  <div class="row1 col1A">Sample content 1A</div>
  <div class="row1 col2A">Sample content 2A</div>
  <div class="row1 col3A">Sample content 3A</div>

  <div class="row2 col1B">Sample content 1B</div>
  <div class="row2 col2B">Sample content 2B</div>
  <div class="row2 col3B">Sample content 3B</div>

</div>

Answer 2

Установите размер экрана для обнаружения мобильных устройств в CSS и добавьте следующее

@media screen and (max-width: SIZE) {
    .row2{
        display: flex; flex-flow: column;
    }

    .col1B{
        order: 1;
    }

    .col2B{
        order: 2;
    }

    .col3B{
        order: 3;
    }
}

А затем добавить классы в DIVs

   <div class="row2">
        <div class="col1B">Sample content</div>
        <div class="col2B">Sample content</div>
        <div class="col3B">Sample content</div>
    </div>

+ Изменить order: 1/2/3; к вашим потребностям.