Push Pull Columns

[icecast]

hi, any suggestions to implement this push-pull div example that reverses column order with my 4 column cardinal layout when browser resizes to 690px width?

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

<div class=”row”>
<div class=”col-md-9 col-md-push-3″>.col-md-9 .col-md-push-3</div>
<div class=”col-md-3 col-md-pull-9″>.col-md-3 .col-md-pull-9</div>
</div>

——————————————–

[one_fourth]
[table type=”standard_minimal”]
[trow]
[tcol]
CONTENT
[/tcol]
[/trow]
[/table]
[/one_fourth]

[one_fourth]
[table type=”standard_minimal”]
[trow]
[tcol]
CONTENT
[/tcol]
[/trow]
[/table]
[/one_fourth]

[one_fourth]
[table type=”standard_minimal”]
[trow]
[tcol]
CONTENT
[/tcol]
[/trow]
[/table]
[/one_fourth]

[one_fourth_last]
[table type=”standard_minimal”]
[trow]
[tcol]
CONTENT
[/tcol]
[/trow]
[/table]
[/one_fourth_last]

[Rui Guerreiro – SUPPORT]

Hi,

Will have forward this one to the Developer.

-Rui

[Swift Ideas – Ed]

Hi @icecast,

Do you have an example set up for this? I don’t see it on that page?

– Ed

[icecast]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Im afraid this isn’t possible with columns, only the page builder assets. What you would need to do is create an extra class, for e.g. ‘force-right’ then add this to your custom css:

@media only screen and (min-width: 690px) { 
.force-right {
  float:right;
}
}

– Kyle

[icecast]

how can you say that it is not possible when i provided the bootstrap link showing that it is possible?!

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

[Kyle – SUPPORT]

What I mean is you can’t add extra classes on the column shortcode, you would need to use the page builder columns so that you can add an extra class

– Kyle

[icecast]

your solution is not clear.

how about just sticking with the bootstrap solution? how would i add a table without shortcodes or pagebuilder? and using the push/pull guideline for 4 columns?

<div class=”row”>
<div class=”col-md-9 col-md-push-3″>.col-md-9 .col-md-push-3</div>
<div class=”col-md-3 col-md-pull-9″>.col-md-3 .col-md-pull-9</div>
</div>

[Swift Ideas – Ed]

Are you just looking to add custom HTML, or are you looking to use this on page builder assets/columns to adjust their positioning?

– Ed

[Kyle – SUPPORT]

Currently, your using the column shortcode to set the 4 columns. If you want to use bootstraps pull and push classes you need to use the column page builder asset instead. So copy the first table column, and paste into a column asset, do this for each of the 4 columns. Then you can add bootstraps classes

– Kyle

[icecast]

i don’t see a column page builder option in the elements section …

i am not looking to add custom html, i just want to use an existing bootstrap solution to reverse column order on browser resize …

in the western world, it is common to read left to right, with content importance also increasing left to right.

on a mobile phone, it makes sense to display the most important content on top, and the least on bottom,
hence the need to reverse column order …

[Kyle – SUPPORT]

The column assets are under ‘Layout’

– Kyle

[icecast]

in layout columns, i do not see a content element or text block option that will accept this

<svg class=”icon-broadcast”><use xlink:href=”#icon-broadcast”></use></svg>

[icecast]

the cleaner, most obvious way to go is to insert the bootstrap code into the text section of a normal wordpress page – rather than forcing your pagebuilder integration.

thanks for the help, but i will look elsewhere for a solution. this is just an exercise in futility.

[Kyle – SUPPORT]

Ok no problem

– Kyle