You can change the Recommendation Box placement in the Personalizer admin panel's Box Designer.
Step 1: Navigate in the site preview to the page you would like to change the placement of the boxes.
Step 2: Click on the Page Setting (the changes will apply to all the recommendation boxes that is in that page) or the specific recommendation box that you would like to change the placement of.
Step 3: Click on Advanced. You will see 3 fields: Placement Sibling, Placement Disposition and CSS Classes.
Step 4: Identify and define the Placement Sibling
The placement sibling is the section of your web page that the recommendation box will be placed above of. Websites are divided into sections such as div.class, section.class and id. Follow these steps to find the placement sibling you desire.
i. Open your Developer Tools by either pressing F12 or right click on the desired section and click Inspect Element
ii. Find the class or id of the section that you would like the recommendation boxes to be above of. Once you find the section, the format on how you will put them in the Placement Sibling section is as follows:
iii. Once you have a Placement Sibling section, the recommendation boxes will be above this section
Step 5: Define the Placement Disposition
The placement disposition is the relative position of the recommendation box in relation to the placement sibling you identified.
Step 6: Identify and Define CSS Classes
Sometimes, store content is not the full width of the screen(i.e. there is empty space on either side of your page content. If that is the case, the recommendation boxes may run the full width of the webpage and you may need to add a class to ensure the recommendation boxes are the correct width.
Add a class to our recommendation boxes to apply any page widths. The most common classes used are container, page-width and row.
Tip: Go to this article to know more about HTML classes.