[Resolved] Change widget placement on mobile

[Tully]

Hi guys,

I am trying to have some (or all, if that isn’t practical) of my widgets appear before the main content on mobile rather than below it. http://www.workingsheepdogtraining.com/product-category/masterclass-sheepdog-training-videos/

On mobile I would like the first two widgets (category search and login) to appear above page content, and the facebook widget to appear below it. I’ve tried some of the other suggested code on other similar questions but can’t get my head around modifying the code to suit my situation, sorry!

[Leo]

Hi there,

Try this CSS to move sidebar widgets on top of content on mobile:

@media (max-width: 768px) {
    #content {
        display: flex;
        flex-direction: column-reverse;
    }
}

Unfortunately I don’t believe it’s possible to separate the widgets so the last one is at the bottom with CSS.

Let me know if this helps 🙂

[Tully]

Great, thanks Leo.

[Leo]

No problem 🙂

[Author]

Posts