Reverse section order on mobile, add column count on desktop

Hi - I'm having trouble styling sections & blocks. I've inserted code to do two things:

1. reverse the display order on mobile (using section id)

2. split the text into 2 columns on desktop/laptop (using block id).

The site is https://spinach-crow-ktsp.squarespace.com/publications-speaking

I've inserted this code for the "Publications" section of the page:

@media screen and (max-width:767px){ 
  section[data-section-id="635c34bedeb2fd442065ab8f"]{
.sqs-row{ 
display: flex !important; 
flex-direction: column-reverse !important; 
}
}}

#block-yui_3_17_2_1_1666977167775_361208{
 @media screen and (min-width: 768px){ 
     -webkit-column-count: 2 !important;
     -moz-column-count: 2 !important;
          column-count: 2 !important;
  -webkit-column-gap: 60px !important;
     -moz-column-gap: 60px !important;
          column-gap: 60px !important;
  }}

but it doesn't work (I've checked in Chrome / FF / Safari on Mac desktop, and Safari on iOS). Any ideas are greatly appreciated, as from what I can tell the code and block/section ids seem correct. Site is password-protected with password kralowec. Thanks!

Can you share your website URL and the page that this is happening on?

Yes, sorry. https://spinach-crow-ktsp.squarespace.com/publications-speaking

And the password? Thanks!

kralowec

Here's some revised code for columns:

@media screen and (min-width: 768px) { #block-yui_3_17_2_1_1666977167775_361208 .sqs-block-content {
  -webkit-column-count: 2 !important;
     -moz-column-count: 2 !important;
          column-count: 2 !important;
  -webkit-column-gap: 60px !important;
     -moz-column-gap: 60px !important;
          column-gap: 60px !important;
  }
}

What are you wanting to reverse the order of? The sections, so Speaking goes above Publications?

Thanks! That 2-column code does the trick.

Re: the other item, in mobile view the word "Publications" appears after the bullet list; I want it to appear before the bullet list as it does on desktop.

Fantastic glad that's working.

If you want Publications above the text then you just need to get rid of the CSS that is swapping the order, easy! Delete this:

@media screen and (max-width:767px){ 
  section[data-section-id="635c34bedeb2fd442065ab8f"]{
.sqs-row{ 
display: flex !important; 
flex-direction: column-reverse !important; 
}
}}

Can you mark my post as the solution and give me a thumbs up?

I added that code to try to fix the problem; it didn't work. I've removed the code but I'm stuck with the same issue: "Publications" appears after the list of bullet points. 

Duh. I think all I have to do is edit in Mobile view to change the order. That's easy. Thanks for your help on the 2-column issue!

Yes, if you're using the Fluid Engine, you must edit the mobile layout every time you make a change or addition to the page. I don't know why Squarespace don't do better at telling users this.