Magento 2: change the order of the product page blocks

Question

I am working on a Magento 2.1.7 shop and I have created a child-theme of Magento Blank.

On the product page, I need to change the layout so that the product photo stays at the left side of the page and the product info at the right, with both div's floated left.

The catalog_product_view.xml looks like this:

<?xml version="1.0"?>
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="div.sidebar.main" remove="true" />
    <referenceContainer name="main" htmlClass="col-xs-12 col-sm-12">
    </referenceContainer>
</page>

Doing this:

<?xml version="1.0"?>
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="div.sidebar.main" remove="true" />
    <referenceContainer name="main" htmlClass="col-xs-12 col-sm-12">
    </referenceContainer>
    <move element="product.info.main" destination="main" before="product.info.media"/>
</page>

brings the photo before the main info but also brings the tabs between them:

<div class="col-xs-12 col-sm-12">
  <div class="product media"></div>
  <!-- Tabs BEGIN -->
  <div>
   <ul class="nav nav-tabs" role="tablist"></ul>
   <div class="tab-content"></div>
  </div>
  <!-- Tabs END -->
  <div class="product-info-main"></div>
</div>

What I need is:

<div class="col-xs-12 col-sm-12">
  <div class="product media"></div>
  <div class="product-info-main"></div>
  <div>
   <ul class="nav nav-tabs" role="tablist"></ul>
   <div class="tab-content"></div>
  </div>
</div>

How must I change the code above and/or what other files shall I edit to get the desired result?

Answer 1

Just add this code in before body end in catalog_product_view.xml

 <move element="product.info.media" destination="content" before="product.info.main"/>

I have tested this its working !!

Answer 2

I did it by changing catalog_product_view.xml, to:

<?xml version="1.0"?>
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <move element="product.info.main" destination="main" before="product.info.media"/>
    <move element="product.info.main" destination="content" before="product.info.details"/>
    <referenceContainer name="div.sidebar.main" remove="true" />
    <referenceContainer name="main" htmlClass="col-xs-12 col-sm-12">
    </referenceContainer>
</page>