possible to change order of modules in tablet view?

Beaver Builder
#1

hello,

I have a full-width row that contains two columns.
Left column has a slideshow with some silo images.
Right column has some text that is static.

Looks great on desktops, but problem is when it’s viewed on a tablet device.

In that case, the slideshow image from the left side displays on TOP of the text, but the problem is that the slideshow images need to display on the BOTTOM of that row, when viewed on a tablet.

Is there any way to switch the order of these two rows on certain devices? I removed it altogether on mobile view, but would really like it to be visible on tablets.

any help is appreciated.
fyi, using BB theme with BB plugin

thx
-matt

http://myglogirl.com/testsite2

#2

Hi Matt,

Have a look at this video I put together on this subject.

In your case, instead of changing the image in the duplicated row, just change the module locations, that is, put the image on the right and text on the left.

http://snifflevalve.com/tutorials/beaver-builder-dynamik-website-builder-switch-image-on-mobile/

Cheers!
Lyle

#3

Hey Matt,

Thanks for posting! Since you’re using the BB theme which is based on bootstrap, you can use their push-pull configuration. More info about that on the link below. You can place the classes on the columns.
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

You can also duplicate that row, make the first one visible on large devices, and the other, visible to medium/small devices and configure it so they swap places.

Let me know if you need further help with either one. :slight_smile:

Ben

#4

thanks for quick replies!

actually found just after I posted the duplicate rows - adjust for different views. great idea!

http://forum.wpbeaverbuilder.com/support/q/ordering-columns-on-mobile-view/

will look at these other links, too.

thanks

#5

No worries! Enjoy BB! :slight_smile:

Ben

#6

thank you both Lyle and Ben!

I used Lyle’s version, more or less, but am intrigued by the bootstrap one.

Question: Do I just need to add “push” or “pull” to the classes, or do I add the entire class, like “col-xs-6 col-md-4 col-md-pull-4”?

#7

Hey Matt,

Now that I tried it, I don’t think those classes will work as we’re adding the width via inline style. It worked before but I guess they changed the logic for the columns. You can still use those push pull classes though, you just need to configure the width using column settings so I guess your best option is to duplicate the row. :slight_smile:

Ben

#8

ok, thanks!

curious if the duplicating/turning off for media was a technique that was planned in advance… BB is amazing.
My only dilemma is deciding whether to use BB theme or Dynamik/Genesis

thanks!
-matt

#9

Hey Matt,

That’s most likely the reason the setting is there as I can’t think of anything else. Indeed it’s a nifty feature. :slight_smile:

You may want to check the FB group. I’m not really active there but I think there have been discussions regarding BB/Genesis. You can also check out the threads below.
http://forum.wpbeaverbuilder.com/support/q/bb-theme-vs-genesis-framework/
http://forum.wpbeaverbuilder.com/support/q/genesisdynamik-question/

Ben

#10