Table Resize Descending Order

[icecast]

hi, looking for guidance when resizing browser to have table columns resize in descending order

for instance – columns 1,2,3, normally resize vertically on mobile from top to bottom 1,2,3

looking to resize columns 1,2,3 vertically on mobile from top to bottom 3,2,1

[Kyle – SUPPORT]

Hi

Unfortunately that’s not possible, divs are collapsed in order. That’s not the theme, it’s just the way responsive design works

– Kyle

[Kyle – SUPPORT]

The only option would be to create 2 tables, one for desktop and one for mobile, then in the visibility options, hide one on desktop and the other on mobile

– Kyle

[icecast]

what about .col-md-push-* and .col-md-pull-* modifier classes ?

http://getbootstrap.com/css/#grid-column-ordering

[Kyle – SUPPORT]

You could use that, however you can’t add extra classes to table columns.

– Kyle

[icecast]

so how would i do “.col-md-9 .col-md-push-3” and “.col-md-3 .col-md-pull-9” with

[one_fourth]
1/4 Text
[/one_fourth]
[three_fourth_last]
3/4 Text
[/three_fourth_last]

[Kyle – SUPPORT]

You would use the page builder, then add a 1/4 text box and a 3/4 text box, then add the custom classes

– Kyle

[icecast]

i just gave you that example above – can you please be more specific?

[Kyle – SUPPORT]

You don’t need to use shortcodes, you should use the page builder, then create the layout as seen in my screenshot.

If you click the pen icon, you will be able to edit the settings, at the bottom there is an extra class field (see screenshot) here you can add col-md-push-3 etc

– Kyle

Attachments:

You must be logged in to view attached files.

[icecast]

so, can i use my custom table classes with swift page builder?

[Kyle – SUPPORT]

Yes

– Kyle

[icecast]

This reply has been marked as private.

[Kyle – SUPPORT]

Please send me a link to the page, without any extra classes etc. And let me know what you want to achieve and I will see if I can provide custom css

– Kyle

[icecast]

This reply has been marked as private.

[Kyle – SUPPORT]

Ok, add a 3/4 text box followed by a 1/4 text box (see screenshot)

Then in the 3/4 text box add the extra class ‘forceright’

Then add this to your custom css:

.forceright {
  float: right;
}

Tested and works fine

– Kyle

Attachments:

You must be logged in to view attached files.