左右に配置するレイアウトはdisplay:flex; flex-direction: row-reverse;で簡単にできる

 
 
テキスト①


 
テキスト②
 

 


テキスト③

.flex-wrap{
display: flex;
flex-wrap:wrap;
}
.flex-wrap img,.flex-wrap p{
width: 50%;
}
.flex-reverse{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-reverse img,.flex-reverse p{
width: 50%;
}