Blog pagination is backward

Site URL: http://www.northrider.me

The pagination in my blog entries seems backward to me.  The pagination link on the left side of the page goes to the NEXT blog post and the one on the right side of the page goes to the PREVIOUS post.  I need the left hand link to go to previous and the right side to go to next.  In my example below "The Idea" post is the first one and should link at the left and the "Planning - Budget" is the next post and should link from the right side of the page.

How do I swap those actions?

This code snipped works for older 7.0 sites, should work for you too, place in custom css. 

.item-pagination[data-collection-type^="blog"] {
    flex-direction: row-reverse;
}
.item-pagination-link {
    text-align: right;
    margin-right: 0;
    margin-left: auto;
}
.item-pagination-link--next {
    text-align: left !important;
    margin-left: 0;
    margin-right: auto;
}

Add these code on Design > Custom CSS

.item-pagination[data-collection-type="blog-side-by-side"]  {
  flex-direction: row-reverse !important;
  .item-pagination-link--prev {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-direction: row-reverse !important;
    .item-pagination-icon{
      transform: rotate(180deg) !important;
    }
  }
  .item-pagination-link--next {
    margin-left: 0 !important;
    margin-right: auto !important;
    flex-direction: row-reverse !important;
    .item-pagination-icon{
      transform: rotate(180deg) !important;
    }
  }
}

5 hours ago, derricksrandomviews said:

This code snipped works for older 7.0 sites, should work for you too, place in custom css. 

.item-pagination[data-collection-type^="blog"] {
    flex-direction: row-reverse;
}
.item-pagination-link {
    text-align: right;
    margin-right: 0;
    margin-left: auto;
}
.item-pagination-link--next {
    text-align: left !important;
    margin-left: 0;
    margin-right: auto;
}

So close.  The navigation text is in the right spot but the "arrows" are on the wrong end of the text.  It looks like this now

The Idea >                           <Planning - Budget

The arrows should be on the opposite end of the respective text and point the other way.  I hope that makes sense?  I can make the arrows disappear but can't seem to get them on the right side of the text and point in the right direction.

I don't think the arrows matter that much, blog posts don't rotate like an image carousel  slideshow. The direction of the arrow is not opposite anything really. If you want to hide just the arrows here is the code:

Hide the arrows, leave the text:

.item-pagination-icon{display: none}

2 hours ago, derricksrandomviews said:

I don't think the arrows matter that much, blog posts don't rotate like an image carousel  slideshow. The direction of the arrow is not opposite anything really. If you want to hide just the arrows here is the code:

Hide the arrows, leave the text:

.item-pagination-icon{display: none}

Yep, I figured out how to do that.  It will be my fallback.  I agree that the arrows aren't really needed.  It was mainly just a way to help me understand the Squarespace CSS more.  Thanks to everyone!