Change the order of the div elements (responsive) - Support

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

May 10, 2015 at 10:07 pm #442148

spr

Participant

Hi!

I need show in order (first image, second text ) when page is responsive.

This is my normal layout: http://imgur.com/a5cYV3g

This is my error (responsive): http://imgur.com/Kcq59i7

Need this solution (responsive) : http://imgur.com/DDoWzV9

its possible modify with CSS or i need use Javascript?

Thanks for all :)

This topic was modified 9 years, 6 months ago by spr.

May 12, 2015 at 12:47 pm #442964

Andy

Inactive Moderator

Hi spr!

try this code in Quick CSS:

@media only screen and (max-width: 767px) {
.flex_column.av_two_fifth.avia-builder-el-12.el_after_av_three_fifth.avia-builder-el-last {
position: relative;
top: -50px;
padding-top: 120px;
}
.flex_column.av_three_fifth.first.avia-builder-el-9.el_after_av_hr.el_before_av_two_fifth {
padding-top: 175px;
}
.avia-image-container.avia_animated_image.avia_animate_when_almost_visible.right-to-left.av-styling-.avia-builder-el-27.avia-builder-el-no-sibling.avia-align-center.avia_start_animation.avia_start_delayed_animation {
position: relative;
top: -370px;
}
.flex_column.av_three_fifth.first.avia-builder-el-23.el_after_av_hr.el_before_av_two_fifth {
top: 200px;
}}

and adjust by yourself as needed.

Best regards,
Andy

May 18, 2015 at 9:22 am #445531

spr

Participant

Hi Andy!

Thanks for your answer, it works!, but when i resize the image, i have this problem:

View post on imgur.com

thanks for all.

May 19, 2015 at 3:04 am #446161

Ismael

Moderator

Hi!

Create two sections with the same content. On the other section, the section for mobile devices, always add the image column before the text content. Use css media queries to show or hide a specific section. Or add another media query like the one above. Adjust the screen width to 480:

@media only screen and (max-width: 480px) {
.flex_column.av_two_fifth.avia-builder-el-12.el_after_av_three_fifth.avia-builder-el-last {
position: relative;
top: -50px;
padding-top: 120px;
}
.flex_column.av_three_fifth.first.avia-builder-el-9.el_after_av_hr.el_before_av_two_fifth {
padding-top: 175px;
}
.avia-image-container.avia_animated_image.avia_animate_when_almost_visible.right-to-left.av-styling-.avia-builder-el-27.avia-builder-el-no-sibling.avia-align-center.avia_start_animation.avia_start_delayed_animation {
position: relative;
top: -370px;
}
.flex_column.av_three_fifth.first.avia-builder-el-23.el_after_av_hr.el_before_av_two_fifth {
top: 200px;
}}

Adjust the top position and top padding values.

Cheers!
Ismael

July 3, 2015 at 9:30 pm #468230

spr

Participant

It works!

Thanks for all

July 4, 2015 at 11:41 am #468374

Ismael

Moderator

Hi!

Great! Glad we could help. :)