Необходимо изменить порядок <div>, когда в мобильном представлении - PullRequest
Новая
       33

Необходимо изменить порядок <div>, когда в мобильном представлении

0 голосов
/ 04 мая 2020

Когда я изменяю размер экрана в соответствии с видом на телефон, <div>, кажется, складывается в другом порядке. Есть ли способ принудительно использовать div для сложения определенного порядка с медиа-запросами, я пытался искать везде и не могу найти простой способ сделать это. Я использую Foldy Grids , чтобы использовать их для отклика.

Порядок делений на полном экране: 1.) Изображение слева, текст на справа 2.) Текст слева, изображение справа

Когда он переходит на мобильный вид, я бы хотел, чтобы он располагался сверху вниз в порядке:

1.) Изображение

1.) Текст

2.) Изображение

2.) Текст

В настоящее время они заказывают как:

1.) Изображение

1.) Текст

2.) Текст

2.) Изображение

html: 

<!-- First section -->
    <div class="row">
        <div class="grid-2">
            <img src="images/EnrolYourself2Small.png">
        </div>
        <div class="grid-4">
             <h1 class="left-align fontAmaticH1">Text............</h1>
             <p class="left-align fontPlayfair">More text...........</p>
        </div>
    </div>
    <br>
<!-- Second section -->
    <div class="row">
        <div class="grid-4">
            <h1 class="left-align fontAmaticH1">2nd text.........</h1>
            <p class="left-align fontPlayfair">more of 2nd div text........</p>
        </div>
        <div class="grid-2">
            <img src="images/MonitorProgressSmall.png">
        </div>
    </div>

1 Ответ

0 голосов
/ 04 мая 2020

вы должны взглянуть на CSS медиазапросы.

эта ссылка может предоставить вам основу для того, что вы хотите

Для заказа контента вы можете выбрать CSS grid:

Ссылка для примеров

И использовать grid-шаблон для каждого запроса в зависимости от устройства, на котором отображается ваш контент

Пример: 

.main{
  display:grid;
  grid-template:
    'imagespace1'
    'textspace1'
    'imagespace2'
    'textspace2'
}

.image1{
  grid-area: imagespace1
}

.image2{
  grid-area:imagespace2
}

.text1{
  grid-area:textspace1
}

.text2{
  grid-area:textspace2
}

@media only screen and (max-width: 500px) {
  /* For mobile phones: */
  [class*="main"] {
    grid-template:
    'imagespace1'
    'imagespace2'
    'textspace1'
    'textspace2'
  }
}
<div class='main'>
  <div class='image1'>image1</div>
  <div class='image2'>image2</div>
  <div class='text1'>text1</div>
  <div class='text2'>text2</div>
</div>
...