How to make widget appear above blogpost on mobile devices

I tried the snippet shared here, but it doesn’t seem to work for me.

Because every theme typically requires different CSS selectors, it’s unlikely a snippet that works on one site will work on another without modification. Depending on your theme’s HTML structure, using the flex box model’s order properties might work. Or your site may require a custom template edit.

We’d need a live link to a page where you’d like the order altered to determine if a CSS flexbox solution is feasible.

Another possible solution would be if your theme offers a left sidebar option. Left sidebars often stack on top in small screens without any extra fuss.

Hi,

Thanks for your reply.

I thought I had already shared a link. This is the website I’m working on: https://test01.mug-cakes.nl/

I’m using the Enoki theme. There doesn’t seem to be an option to put the sidebar/widget area to the left side…

For mobile, I’d really like the sidebar/widget area to appear at the top of the other content (blog posts), so vistors can read a bit of information about the website without having to scroll through the blog posts first.

I made it work!

I set the container that contains both columns to display: flex and row-reverse.

Then I set the right column to float left, and the left column to float right:

.not-full.outter-wrapper.page-content{
display: flex;
flex-direction: row-reverse;
}

.is-sidebar .main-column{
width: 65%;
margin-left: 3%;
float: right;
}

.is-sidebar aside.sidebar{
width: 35%;
margin-right: 3%;
/* padding-left: 3%; / float: left; height: auto; / position: relative; */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 4em;
}

I manged to apply it to mobile as well, but the column size is too narrow. However, if I increase the width, the column/content shifts to the right, beyond the viewpoint.

Any idea how to fix this, or how to code this in a better way?

Thank yoU!

• This reply was modified 2 years ago by chloeponee.

In .not-full.outter-wrapper.page-content you have width: 320px;. You’d be better off using 100% width here. Mobile screens come in a variety of widths ??

You want to increase column size for the .is-sidebar .main column? It’s currently set to width: 65%; You can change this to any percentage you like, even 100% is suitable because some padding remains. Lose the margin-left: 3%; so the column remains centered.

That worked! Thanks so much for all your help!