If you don’t need to support Android 2 and Opera Mini you can still use flexbox to achieve this result via media query. Example below:
.img {
width: 100%;
max-width: 100%;
height: 300px;
background: blue;
}
.ad {
background: red;
width: 100px;
height: 100px;
}
@media (min-width : 801px) {
.wrapper {
padding-right: 110px;
}
.img {
float: left;
}
.ad {
clear: right;
float: right;
margin-right: -110px;
margin-bottom: 10px;
}
}
@media (max-width : 800px) {
.wrapper {
display: flex;
flex-direction: column;
}
.img {
order: 2;
margin: 10px auto;
}
.ad {
margin: 0 auto;
}
.ad1 {
order: 1;
}
.ad2 {
order: 3;
}
}<div class="wrapper">
<div class="img"> </div>
<div class="ad ad1">ad1</div>
<div class="ad ad2">ad2</div>
</div>Also:
- I didn’t use browser prefixes for flexbox, so it will not work in all browsers. Add prefixes or use autoprefixer to make it work there.
- Fix media query parameters for you needs, I only inserted width 800 as example value, real query to detect mobile will differ.