Whoa. I’ve long wanted to do this, and finally figured out how! E.g., on a mobile-driven tour, I really wanted each stop’s Map/Get directions to appear toward the top… so people can get there before they read about it. On an audio-focused tour, it would be nice for the Audio links to come before the supplementary Images.
This CSS code works by using the capabilities of the ‘flex’ type of block layout, which is relatively new. (I have it working successfully in CurateScape 3.4.3, but I believe it will work in earlier 3.xx versions?)
The trick is to set ‘flex’ on the parent container of the objects you want to reorder. In this case it is the article.story.item tag. The only hitch is that some blocks can size themselves differently inside of a flex box, so I must set an explicit width.
To put the Map Directions right underneath the Story’s header, add this CSS in your Appearance > Configure Theme > Advanced CSS. You can further change the order by changing the numeric choices therein:
/* REORDER PAGE ELEMENTS */
article.story.item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
/* My desired ordering */
article.story.item header#story-header { -webkit-order: 1; order: 1; width: 100%; }
article.story.item section.text { -webkit-order: 3; order: 3; width: 100%; }
article.story.item section.media { -webkit-order: 4; order: 4; width: 100%; }
article.story.item section.map { -webkit-order: 2; order: 2; width: 100%; }
article.story.item aside#factoid { -webkit-order: 5; order: 5; width: 100%; }
article.story.item section.metadata { -webkit-order: 6; order: 6; width: 100%; }
article.story.item nav.tour-nav-container.bottom { -webkit-order: 7; order: 7; width: 100%; }
To show the story’s Audio files above the Images, add this CSS:
/* Re-order within media */
article.story.item section.media {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
figure#item-audio { -webkit-order: 1; order: 1; }
figure#item-photos { -webkit-order: 3; order: 3; width: 100%; }
section.media div.pswp { -webkit-order: 4; order: 4; }
section.media h2 { -webkit-order: 5; order: 5; }
section.media h3 { -webkit-order: 2; order: 2; }
/* hide the word AUDIO as it's self-evident */
section.media div.pswp + h3 { display: none; }