Как сделать, чтобы на мобильной версии элементы менялись местами?

[Dripper]

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

[Dripper]

в общей обёртке если один блочный элемент сверху, у другой снизу, а я сменил обёртке стиль на "display: flex;", а обоим элементам "width: 50%;", то верхний станет слева, а нижний - справа. А как наоборот сделать, чтобы верхний справа, а нижний слева? я придумал только использовать position: absolute. получилось криво. Как сделать, чтобы блок-обёртка подстраивался по высоте под картинку?
https://codepen.io/zfO/pen/oNQJorE

<div class="cir_obj_container">
    <div class="cir_obj">
        <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div>
        <div class="bottom_text">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        </div>
    </div>
    <div class="cir_obj reverse">
        <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div>
        <div class="bottom_text">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        </div>
    </div>
    <div class="cir_obj">
        <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div>
        <div class="bottom_text">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        </div>
    </div>
</div>
<style>
.cir_obj_container{
    display: flex;
    width: 100%;
}
 
.cir_obj{
    width: 33%;
    display: inline-block;
    margin: 20px;
}
 
.cir_obj img{
    margin: 20px;
    height: 230px;
    width: auto;
}
 
.cir_obj img{
    width: 100%;
    height: auto;
}
 
@media (max-width: 1280px) {                
    .cir_obj{
        width: 100%;
        display: flex;
        margin: 0px;    
    }
    .cir_obj_container{
        display: block;
    }
    .cir_obj .bottom_text, .cir_obj .img{
        width: 50%;
        margin: 30px;
        
    }
    .cir_obj.reverse .bottom_text{
        width: calc(50% - 60px);
    }
    .cir_obj.reverse .img, .cir_obj.reverse .img img{
        right: 0px;
        position: absolute;
    }
}
<style>

[James229]

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

Используйте медиа-запросы. Медиа-запросы CSS позволяют применять стили в зависимости от размера экрана или типа устройства. Вы можете использовать медиа-запросы для настройки определенной ширины экрана, например, той, которая обычно встречается на мобильных устройствах (например, 320 пикселей, 480 пикселей и т. д.).

Настройте CSS Flexbox или Grid. Если ваш макет основан на CSS Flexbox или Grid, вы можете использовать медиа-запросы для изменения свойств гибкости или сетки. Например, вы можете изменить flex-directionсвойство на «столбец» для мобильных макетов, чтобы элементы располагались вертикально.

CSS

Скопировать код
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}
Изменение порядка элементов. Чтобы поменять местами элементы, вы можете использовать это orderсвойство. Присвойте элементам разные orderзначения, чтобы изменить их порядок, когда размер экрана соответствует медиазапросу.

CSS

Скопировать код
@media screen and (max-width: 768px) {
.element-to-swap {
order: 2; /* Change the order as needed */
}
}
Скрыть или показать элементы. В некоторых случаях вам может потребоваться скрыть или показать определенные элементы на экранах разных размеров. Для этой цели вы можете использовать displayсвойства и медиа-запросы.

CSS

Скопировать код
@media screen and (max-width: 768px) {
.element-to-hide {
display: none; /* Hide the element on smaller screens */
}
}
Тестируйте и улучшайте: протестируйте свой адаптивный дизайн на различных мобильных устройствах и размерах экрана, чтобы убедиться, что элементы меняются ожидаемым образом и макет выглядит хорошо.

Помните, что адаптивный веб-дизайн во многом зависит от вашей конкретной структуры HTML и CSS, поэтому адаптируйте эти шаги к коду и требованиям к дизайну вашего веб-сайта. Кроме того, всегда учитывайте пользовательский опыт и удобство использования при перестановке элементов на мобильных устройствах, чтобы обеспечить плавный переход между экранами разных размеров.

[James229]

Либо же
Определите элементы . Сначала определите элементы, которые вы хотите поменять на мобильных устройствах. Назовем их Элемент А и Элемент Б.

Структура HTML . Убедитесь, что ваша структура HTML настроена таким образом, чтобы ее можно было легко менять. Убедитесь, что элемент A и элемент B расположены близко друг к другу в разметке HTML.

CSS Flexbox или Grid : вы можете использовать CSS Flexbox или Grid для управления расположением этих элементов. Flexbox особенно полезен для изменения порядка элементов.

CSS

Скопировать код
.container {
display: flex;
flex-direction: column; /* For mobile layout, stack elements vertically */
}

@media (min-width: 768px) {
.container {
flex-direction: row; /* For larger screens, display elements side by side */
}

.element-a {
order: 2; /* Change the order for Element A */
}

.element-b {
order: 1; /* Change the order for Element B */
}
}
Медиа-запросы . Используйте медиа-запросы для применения различных стилей CSS в зависимости от размера экрана. В приведенном выше примере мы используем @media (min-width: 768px)определение стилей для экранов с минимальной шириной 768 пикселей (типично для планшетов и более крупных устройств). При необходимости вы можете настроить эту точку останова.

Тестирование . Проверьте свой дизайн на различных мобильных устройствах и экранах различных размеров, чтобы убедиться, что элементы меняются должным образом.

Адаптивный дизайн . Этот подход является частью адаптивного веб-дизайна, целью которого является обеспечение оптимального просмотра и взаимодействия на разных устройствах. Рассмотрите также другие методы адаптивного дизайна, такие как настройка размеров шрифта, интервалов и изображений для мобильных экранов.

Используя CSS Flexbox или Grid и медиа-запросы, вы можете легко управлять расположением элементов и добиваться желаемого эффекта замены на мобильных устройствах, сохраняя при этом удобный дизайн.