Change order of stacked columns on mobile devices

Home Forums Jevelin Theme Change order of stacked columns on mobile devices

Home Forums Jevelin Theme Change order of stacked columns on mobile devices

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Hi,

    is it possible  to change the order of the columns, when they get stacked on mobile devices. (Like bootstrap’s push and pull classes)
    Example:
    The row on a desktop sized screen
    ( —1—) (—2—)
    On mobile devices: –> Stacked, but the second column should be on the upper side of the stack.
    (—2—)
    (—1—)

    So is there a possibility to do that?

    Hoping for your help.

    Regards

    Peter

    Hi @Peter,

     

    I hope you are well today and thank you for your question.

     

    We can achieve this by developing custom CSS code but for that you have to displays columns in the order ( —2—) (—1—) on desktop then using CSS code we can change its order to ( —1—) (—2—)

     

    Please do this and share me the page URL from your site where it is displaying so that i can help you.

     

    Best regards,
    Shufflehound team

    Hi,

    thank you for your answer & here I’m sending the url.

     

    1. The three rows under the slider should be stacked as required.

    (—Text—-)(-Pic)

    (-Pic-)(—Text—)

    (—Text—-)(-Pic)

     

    On mobile devices they should be stacked like that:

    (—Text—-)

    (— Pic —-)

     

    2. The section “LEISTUNGEN” with it’s rows should also be stacked like described above.

     

    Thank you for your help!

    Regards

    Peter

    As said above to achieve this first make the elements in the row display in the following order.

     

    (—Text—-)(-Pic)

    (—Text—-)(-Pic)

    (—Text—-)(-Pic)

     

    Then i can help you to display it in below order on desktop.

     

    (—Text—-)(-Pic)

    (-Pic-)(—Text—)

    (—Text—-)(-Pic)

    Hi,

     

    sorry I misunderstood that, but now I have changed the order of the columns as required.

     

    Looking forward to your help!

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media (min-width: 800px){
    .sh-section-3ddcea5d5d3089a949180375fe30e126 .sh-column-211ae124ede2926a6896789f5c62af73 {
        float: left;
    }
    
    .sh-section-3ddcea5d5d3089a949180375fe30e126 .sh-column-0f55ac5e629cb3cd377e7b292e56ba88 {
        float: right;
    }
    }
Viewing 6 posts - 1 through 6 (of 6 total)