tors

The JavaScript below should work. It swaps the URL and Title.
JavaScript
(function(){ // Get previous element url and title const prevEl = document.querySelector('.item-pagination-link--prev'); const prevUrl = prevEl && prevEl.getAttribute('href'); const prevTitleEl = prevEl && prevEl.querySelector('.item-pagination-title'); const prevTitle = prevTitleEl && prevTitleEl.textContent; const prevTitleWrapper = prevEl && prevEl.querySelector('.pagination-title-wrapper'); const prevIcon = prevEl && prevEl.querySelector('.icon'); // Get next element url and title const nextEl = document.querySelector('.item-pagination-link--next'); const nextUrl = nextEl && nextEl.getAttribute('href'); const nextTitleEl = nextEl && nextEl.querySelector('.item-pagination-title'); const nextTitle = nextTitleEl && nextTitleEl.textContent; const nextTitleWrapper = nextEl && nextEl.querySelector('.pagination-title-wrapper'); const nextIcon = nextEl && nextEl.querySelector('.icon'); // Handle when user is on first page if(!prevEl && nextEl && nextTitleWrapper) { const tpl = document.createElement('template'); tpl.innerHTML = `<div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div>`; nextTitleWrapper.innerHTML = nextTitleWrapper.innerHTML.replace(/\bNext\b/g, 'Previous'); nextEl.classList.add('item-pagination-link--prev'); nextEl.classList.remove('item-pagination-link--next'); nextIcon && nextEl.removeChild(nextIcon); nextIcon && nextEl.prepend(tpl.content) } // Handle when user is on last page if(prevEl && !nextEl && prevTitleWrapper) { const tpl = document.createElement('template'); tpl.innerHTML = `<div class="item-pagination-icon icon icon--stroke"><svg class="caret-right-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline></svg></div>`; prevTitleWrapper.innerHTML = prevTitleWrapper.innerHTML.replace(/\bPrevious\b/g, 'Next'); prevEl.classList.add('item-pagination-link--next'); prevEl.classList.remove('item-pagination-link--prev'); prevIcon && prevEl.removeChild(prevIcon); prevIcon && prevEl.appendChild(tpl.content) } // Set next element title and url with the previous if(nextEl && nextTitleEl && prevUrl && prevTitle) { nextEl.setAttribute('href', prevUrl); nextTitleEl.textContent = prevTitle; } // Set previous element title and url with the next if(prevEl && prevTitleEl && nextUrl && nextTitle) { prevEl.setAttribute('href', nextUrl); prevTitleEl.textContent = nextTitle; } })()  
Make sure you add the JavaScript to the Footer using Code Injection and place it between <script> tags, e.g.
<script> // Add JS here </script>
Here's a video of me updating the JS via Chrome's dev tools to ensure it works. 

9xlp5mzmcK.mp4  

@tors Updated the code above to account for the first and last books in the series.

First thing to know is that a CSS solution (or a client-side JS solution for that matter) can only affect elements that have already been loaded up. that means that you can only reverse the order of the first n posts which squarespace. (n is set in the blog page settings and can go up to a max of 20).
if you're ok with that, then it's actually pretty easy. just make sure that the blog container you're using is set to flex and then reverse the flex direction.
so in your case - as you're using side-by-side - just add this to your css.
.blog-side-by-side-wrapper { display:flex; flex-direction:column-reverse; } remember though, if your page is set to show n articles and you add n+1 articles to your blog then you won't get the oldest post. you'll get the oldest post of the first n newest posts.... your pagination would also be a bit weird.
PS. the first computer we ever had in our house was a TRS-80!
 
ADDENDUM: Pagination on item pages
I looked at your post and you want to swap the pagination links as well. A little trickier, as the next and previous are aligned and padded in specific ways with arrow icons. But you can do it. 
reverse the flex direction invert the padding flip the icons 100% horizontal prefix the css rules with this particular blog collection-id as you don't want to change other pagination in the site  
body.collection-642f14ee1e413265ff0d44f2 section#itemPagination { flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next { margin-left: 0; margin-right: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next .item-pagination-icon { padding-left: 0px; padding-right: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev .item-pagination-icon { padding-right: 0px; padding-left: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link svg { transform: scaleX(-100%); }  

Just solved for 3 members. Add all to Code Block
<div class="container"> <h1> typewriter01 | <!-- The words that we want to have typerwriter effect --> <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span> </h1> </div> <style> /* CSS RESET */ /* ALIGN CONTENT */ .container { display: flex; /* Remove horizontal 'justify-content' center if you want the base text not to move */ justify-content: center; align-items: center; } /* ADD CURSOR */ .txt-type > .txt { border-right: 0.08rem solid #fff; padding-right: 2px; /* Animating the cursor */ animation: blink 0.6s infinite; } /* ANIMATION */ @keyframes blink { 0% { border-right: 0.08rem solid rgba(255, 255, 255, 1); } 100% { border-right: 0.08rem solid rgba(255, 255, 255, 0.2); } } #page .section-background {background: white;} #page section * {color: black !important;} #page .content { width: 100%; } </style> <script> class TypeWriter { constructor(txtElement, words, wait = 3000) { this.txtElement = txtElement; this.words = words; this.txt = ""; this.wordIndex = 0; this.wait = parseInt(wait, 10); this.type(); this.isDeleting = false; } type() { // Current index of word const current = this.wordIndex % this.words.length; // Get full text of current word const fullTxt = this.words[current]; // Check if deleting if (this.isDeleting) { // Remove characters this.txt = fullTxt.substring(0, this.txt.length - 1); } else { // Add charaters this.txt = fullTxt.substring(0, this.txt.length + 1); } // Insert txt into element this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`; // Initial Type Speed let typeSpeed = 50; if (this.isDeleting) { // Increase speed by half when deleting typeSpeed /= 2; } // If word is complete if (!this.isDeleting && this.txt === fullTxt) { // Make pause at end typeSpeed = this.wait; // Set delete to true this.isDeleting = true; } else if (this.isDeleting && this.txt === "") { this.isDeleting = false; // Move to next word this.wordIndex++; // Pause before start typing typeSpeed = 500; } setTimeout(() => this.type(), typeSpeed); } } // Init On DOM Load document.addEventListener("DOMContentLoaded", init); // Init App function init() { const txtElement = document.querySelector(".txt-type"); const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter(txtElement, words, wait); } </script> Notes: Haven't tested with SS 7.0

Thank you. I just tweaked your code to work on my site, 7.1
Here is code
/* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } }  

Add to Last Line in Code Injection > Footer
<script> $(document).ready(function() { $('.product-description').insertAfter('div#productThumbnails'); }); </script>  

Site URL: https://podcastology.co/templates/solo-episode-planner
Hi,
I'm wondering if there's a way to use the space on a product page better than the default settings currently do. I'm using Wells and I'd like to move the .product-description section up under the image carousel if possible, but only on tablet and upwards (or wherever the two columns kick in) so that blank space on the left is filled a bit better.
Product Page: https://podcastology.co/templates/solo-episode-planner
If possible, I'd also like to put the price and the buy now button on the same line, is that doable?
Many thanks in advance!
Tors

Thanks tuanphan, unfortunately that's made no difference to the layout. Just for clarity, I've upload an image to show what I'm after a bit better as I'm not sure I'm explaining it very well, and the change needs to be on desktop only please.
 

Add to Design > Custom CSS
@media screen and (min-width:501px) and (max-width:800px) { div#page-5d6119fb28912e00016c9753 .span-12 { column-count: 2; } }  

Once someone has clicked the add to cart button (and the item has gone to their cart). How do I automatically redirect them to another page within the site?
I thought maybe changing the ecommerce site to allow express checkout - so once they click purchase it redirects them to the checkout page - but instead would redirect to another page within the site.
Ex. They want to purchase a blanket within the shop. They select how many they need and then select "purchase". Once they click "purchase" they are then directed to a new page allowing them to purchase monogramming for that blanket.
Thanks ahead of time!

Lots of folks have asked a similar question in different ways and there don't seem to be answers posted, so I figured I'd try again. This community is such an amazing resource!
I am wondering if there is a way to use CSS to swap the order of blocks in mobile view so that you can specify some blocks to stack right to left rather than the standard left to right. So something like:
@media only screen and (max-width: 640px) { //identify blocks you want to swap and change their order }
My site is fh-partners.squarespace.com. Here's what I want to do specifically (on the team page):
I really like my desktop arrangement, which is:
<1 picture> <2 text> <3 text> <4 picture>
Ideally I would like my mobile view to be arranged:
<1 picture> <2 text> <4 picture> <3 text>
But squarespace goes left to right so it ends up as:
<1 picture> <2 text> <3 text> <4 picture>
Is there css to swap blocks 3 and 4 in the mobile view?
Thank you in advance!

I love the new Summary Block carousel. I'm curious if it's possible to "autoplay" the carousel much like galleries can do. I know this is possible using Developer Platform galleries, but would love to be able to use with Block Carousels.

How can I add a Search Block to the top of the site, in or near the header? Thanks.