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

[Grani]

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

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

 

[Switch74]

можно так попробовать
https://codepen.io/cmopkxzy-the-lessful/pen/mdQaGZd