Bootstrap Push, Pull column ordering

BB Theme
1

Hello,

I’m creating a contact page and I’d like to put the Contact Form 7 shortcode in col-md-8 and then address information in a col-md-4 then change the order on small devices using pull and push but I seem to lose my column classes when I drag the html modules into the row.

Should I select the single row module and then add the column classes to the modules within the row? or add one html module to the row and use css to create the column divs?

Thanks

Bob

2

Hey Bob,

Should I select the single row module and then add the column classes to the modules within the row?

Yes, this would work, but you may want to add the classes to the actual columns in this row. Hope that helps, but let us know if you need anything further! If so, send along a link to the site as well so I can do some inspecting.

Best,
Billy

3

Billy,

Thanks for getting back to me so quickly!
I’m so used to hand coding everything, BB is awesome and once I get it all down I’ll be able to fly through site development.

What I did was create a 2 column row then dragged the HTML module into the left column and the Text Edit module into the right column, I put the CF7 shortcode in the left columns HTML module and then some content into the Text Edit module. I was going to add classes to the columns but it seems to lose the actual columns when I save.

I know it’s within reach, just driving me crazy… LOL

I’ll try again if not I will send you a link. Do you need WP access?

Thanks

Bob

4

I added a 2 column row then added the bootstrap .col-md-8 & .col-md-4 classes to the columns, added the HTML module to each column with some basic <p> content then saved, published. Went back in and can only access row and HTML modules, not the columns.

What am I doing wrong?

Thanks again!

5

Never mind, I see the column settings in the module settings bar. Ugh… My Bad!!!

6

One last question regarding the column size and ordering.
If I enter the percentage for 2 columns as follows do I use the col-md-push-4 col-md-pull-8 in the column class?

7

[Content Hidden]

8

Hi Bob,

Beaver Builder is using Bootstrap 3 which uses a “Mobile First” approach. So for your case, we need to create the BB layout based on what we want the mobile view to look. Since you want the ‘address column’ to appear first on mobile, put that on the left side of the row then the ‘contact form column’ on the right side. Give the ‘address column’ a class of col-lg-3 col-lg-push-9 and the ‘contact form column’ a class of col-lg-9 col-lg-pull-3. From there, you should be able to add/modify the classes to suit your needs.

Hope this helps.

Ben