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

Question

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

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

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

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

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

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

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

Answer 1

Установка размера экрана для обнаружения мобильного устройства в 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; для ваших нужд.

Answer 2

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

В вашем примере я должен был содержать дочерние элементы в одном контейнере , а затем я мог контролировать заказ, используя свойство 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>