New Landing › How can we help? › Cardinal › Push Pull Columns

Viewing 15 posts - 1 through 15 (of 35 total)
1 2 3
  • Back to forum
    Posted in: Cardinal
  • August 20, 2014 at 4:43 am #102500
    icecast
    Member
    Post count: 182

    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]

    August 20, 2014 at 2:38 pm #102679
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    Will have forward this one to the Developer.

    -Rui

    August 21, 2014 at 12:35 am #102857
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Hi @icecast,

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

    – Ed

    August 21, 2014 at 12:43 am #102859
    icecast
    Member
    Post count: 182
    This reply has been marked as private.
    August 21, 2014 at 2:01 pm #103080
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    August 21, 2014 at 2:19 pm #103090
    icecast
    Member
    Post count: 182

    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

    August 21, 2014 at 2:21 pm #103092
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    August 21, 2014 at 2:29 pm #103097
    icecast
    Member
    Post count: 182

    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>

    August 21, 2014 at 2:33 pm #103099
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    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

    August 21, 2014 at 2:35 pm #103102
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    August 21, 2014 at 3:02 pm #103109
    icecast
    Member
    Post count: 182

    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 …

    August 21, 2014 at 3:06 pm #103112
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    The column assets are under ‘Layout’

    – Kyle

    August 21, 2014 at 3:11 pm #103114
    icecast
    Member
    Post count: 182

    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>

    August 21, 2014 at 3:35 pm #103121
    icecast
    Member
    Post count: 182

    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.

    August 21, 2014 at 3:52 pm #103123
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Ok no problem

    – Kyle

  • Back to forum
    Posted in: Cardinal
Viewing 15 posts - 1 through 15 (of 35 total)
1 2 3

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register