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

#css #wordpress #mobile #resize #multiple-columns

#css #wordpress #Мобильный #изменение размера #несколько столбцов

Вопрос:

у меня есть веб-сайт https://nestofthoughts.com /

на моей домашней странице у меня есть два столбца, и в каждой строке я чередую текст / картинку. (сначала текст, затем второе изображение в одной строке), а затем в следующей строке все наоборот.

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

например, добавление класса css к отдельным столбцам? или его родительский контейнер?

******************************************** обновить

хммммм, что я сделал, так это.

 @media (max-width: 599px) {
  .wp-block-getwid-section:nth-child(even) .wp-block-columns.reverse-order .wp-block-column:first-child {
    order: 1;
  }
}

я ввел определенный класс с именем reverse-order . я не ставлю пробелов между wp-block-columns и этим селектором, поэтому он должен выбирать все элементы с обоими этими именами. а затем найдите .wp-block-column:first-child .

моя логика неверна?

1. Да, это распространенная проблема. Когда я работаю с конструкторами страниц, у них обычно есть опция строки, например «Перевернутый порядок устройств», чтобы решить проблему. Но если он недоступен для OceanWP, я могу написать для вас собственное CSS-решение.

2. спасибо за ваше предложение! в данный момент я нахожусь в процессе отладки ….. надеюсь, выяснится, что не так

Ответ №1:

Решение для вашего макета:

Текст-изображение на мобильном устройстве:

 @media (max-width: 599px) {
  .single-page-article .wp-block-getwid-section:nth-child(even) .wp-block-columns .wp-block-column:first-child {
    order: 1;
  }
}

Изображение-текст на мобильном устройстве:

 @media (max-width: 599px) {
  .single-page-article .wp-block-getwid-section:nth-child(odd) .wp-block-columns .wp-block-column:first-child {
    order: 1;
  }
}

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

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

3. «я не уверен, что вы имеете в виду. ` — ВАШ css-код НЕ СУЩЕСТВУЕТ на странице. Я понятия не имею, как это можно интерпретировать иначе)))

4. ваш код работает безупречно! на это повлиял какой-то другой мой код. спасибо за ваши решения! это было действительно полезно, и я изучил некоторые css-селекторы из-за вашего кода! я ценю вашу помощь и отметил ваш ответ как выбранный.