Move category title above category page image

Question

I want to move the category title to this image:

Is it possible to do it with the layout.xml or is CSS needed to move it there?

Answer 1

I have added css to the image and the title:

@media all and (min-width: 768px), print {
   .category-view{
   width: 79.16666667%;
   float: right;
   -ms-flex-order: 2;
   -webkit-order: 2;
   order: 2;
 }
  .page-title-wrapper{
    width: 79.16666667%;
    float: right;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
  .page-title-wrapper.product{
    width: 100%;

  }

}

@media only screen and (min-width: 768px) and (max-width: 991px){

  .category-view{
    width: 75%;
  }

  .page-title-wrapper{
    width: 75%;
  }
}

Now it gives the following result:

Answer 2

Place the following code in your theme's catalog_category_view.xml file right before the closing body tag <move element="page.main.title" destination="columns.top" before="-"/>.

You may also be able to place it in the admin category page layout xml updates area, though offhand I'm unsure if M2 allows the <move> tag in that location.