Custom code needed to display two elements of my header on mobile view

I need help to create a custom code to be able to display both my "BOOK" button and cart button outside of my hamburger menu on the mobile version of my site. 

My site: nailvaultbyaleksa.com

First picture: what the mobile site looks like (I need the cart button on the right side of the "BOOK" button, but still aligned on the left.

Second picture: what the mobile version looks like right now and the design I chose based on the site's template.

Third picture: the code I put so that my book button is outside of my hamburger on mobile, because my site's template automatically includes it in the hamburger, which I did not want.

Fourth picture: what my site looks like in desktop view, which I am happy with and do not want to change.

You can change the first 4 lines of your code from what it currently is, to this
 

@media screen and (max-width: 767px) {
  .header-actions.header-actions--right {
    display: flex !important;
  }
  .header-actions.header-actions--right .showOnMobile {
  	order: 1;
  }
  

if the result you're looking for is this