Разбиение 1 строки с 4 делителями на 2 строки и столбцов с медиа-запросами

Question

Я пытаюсь разбить следующую строку с 4 изображениями на экранах, которые равны или меньше 800 пикселей: https://i.ibb.co/1RmqDN2/1row.jpg

На 2 строки и 2 столбца, так что это будет выглядеть примерно так: https://i.ibb.co/DWJp7mM/2row.jpg

Я использую медиа-запросы, чтобы попытаться добиться этого, но я не нахожу решения.Я Noob кодирования, а также на CSS и хотел бы помочь.Вот что я пробовал до сих пор:

          @media only screen and (max-width: 800px) {
              .AR_55.ob-strip-layout .ob-dynamic-rec-container /*This is the selector of each column (image and the text below it)
              {
                  width:25%;
                  float:left;
              }
          } 

Это самое близкое, что я получил:

          @media only screen and (max-width: 800px) {
              .AR_55.ob-strip-layout .ob-dynamic-rec-container /*This is the selector of each column (image and the text below it)
              {
                  width:45%;
                  float:left;
              }
          } 

Он разбился на 2 столбца и 2 строки, но выравнивание было плохим, и яне могу это исправить.

Есть идеи?Рад предоставить больше информации, если это необходимо.Спасибо!

Answer 1

Используя ваш метод, должно работать следующее:

.AR_55.ob-strip-layout .ob-dynamic-rec-container {
  width: 25%;
  float: left;
}

@media only screen and (min-width: 800px) {
  .AR_55.ob-strip-layout .ob-dynamic-rec-container {
    width: 50%;
    float: left;
  }
}

Я также использовал min-width в медиа-запросе, мои предпочтения читайте больше об этом здесь

Кроме того, не стесняйтесь обновлять свой вопрос с помощью кода, переданного нам в коде или подобном.

Answer 2

Для достижения идеального выравнивания вы можете использовать эти элементы в виде столбцов в таблице. Ниже ссылки подробно описывают, как вы можете разбить столбцы таблицы на 2 разные строки для небольших экранов. Строки разделенных таблиц для небольших экранов