How to change Layout of the Page in Spartacus?

You can customize the layout of page templates by creating a custom layout file and using that file as the layout file in app.module.ts

You can change the ordering of the slots i.e page structure in your ts file, and adjust the css of the layout from layout.scss for your page to look like the one in your photo

You can find the default spartacus layout config file here

For example:

custom-layout-config.ts

import { LayoutConfig } from '@spartacus/storefront';

    export const customLayoutConfig: LayoutConfig = {
      layoutSlots: {
        header: {
          lg: {
            slots: [
              'PreHeader',
              'SiteContext',
              ...
            ],
          },
          slots: ['PreHeader', 'SiteLogo', 'SearchBox', 'MiniCart'],
        },
        navigation: {
          lg: { slots: [] },
          slots: ['SiteLogin', 'NavigationBar', 'SiteContext', 'SiteLinks'],
        },
        footer: {
          slots: ['Footer'],
        },
        LandingPage2Template: {
          pageFold: 'Section2B',
          slots: [
            'Section1',
            'Section2A',
            'Section2B',
            'Section2C',
            'Section3',
            'Section4',
            'Section5',
          ],
        },
        ProductDetailsPageTemplate: {
          lg: {
            pageFold: 'UpSelling',
          },
          pageFold: 'Summary',
          slots: [
            'Summary',
            'UpSelling',
            'CrossSelling',
            'Tabs',
            'PlaceholderContentSlot',
          ],
        },
...
    };

app.module.ts

B2cStorefrontModule.withConfig({
...
layoutSlots: customLayoutConfig.layoutSlots,
...
})

Perhaps you can find some information about how to do this in the Spartacus docs for Page Layout and CSS Architecture