There are attributes and markups in Beans that can be adjusted to adjust the HTML layout of the page.
NB! Turn on Beans development mode. By going to: WordPress Admin -> Appearance -> Settings.
An example of moving a header menu to below the header . Find the Data markup ID. On the frontend of the site. Right click the area you want to adjust and open Inspect (Elements). It might look something similar to this:

Notice the data-markup-id of beans_primary_menu. Lets move it below the header.
// Move menu below header.
beans_modify_action_hook( 'beans_primary_menu', 'beans_header_after_markup' );
// Remove float and add container.
beans_remove_attribute( 'beans_primary_menu', 'class', 'uk-float-right' );
beans_wrap_markup( 'beans_primary_menu', 'example_primary_menu', 'div', array( 'class' =>
'uk-container uk-container-center' ) );
The first code moves the primary menu below the header.
The second code removes the uk-float-right. Then adds the classes uk-container and uk-container-center to center the menu.
Markups Hooks
All markup added using Beans have dynamic action hooks firing around it.
{$markup_id}_before_markup, fires before the opening markup.
{$markup_id}_prepend_markup, fires after the opening markup (not available for selfclosed markup).
{$markup_id}_append_markup, fires before the closing markup (not available for selfclosed markup).
{$markup_id}_after_markup, fires after the closing markup.
community.getbeans.io/discussion/beans-html-api-visual-hooks-guide
Remove
To remove a specific CSS class. For instance I notice a uk block adding some HTML and CSS I do not want inside the beans main or header area. Then I just remove it.
//Removes uk-block from main area.
beans_remove_attribute( 'beans_main', 'class', 'uk-block' );
// Removes uk-container and uk-container-center from the header area.
beans_remove_attribute( 'beans_fixed_wrap[_header]', 'class', 'uk-container uk-container-center' );
To remove a DIV.
// Removes the HTML container div area inside of main.
beans_remove_markup( 'beans_fixed_wrap[_main]' );
Add
Add a new class inside an existing class
// Adds: In beans_main (tm-main) the class another-css-class.
// 1. Data-markup-id to where it is to be added. 2. class or div. 3. Name of the new class/div.
beans_add_attribute( 'beans_main', 'class', 'another-css-class' );
Notice the below another-css-class. This can then be styled.

getbeans.io/code-reference/functions/beans_add_attribute/
Markup ID, class and then the name.
beans_add_attribute( string $id, string $attribute, string $value )
Replace
To replace a class (or multiple) with another class use the beans_replace_attribute. Notice the above screenshot the uk-container uk-container-center css classes inside the data-markup-id of beans_fixed_wrap[_main].
beans_replace_attribute( 'beans_fixed_wrap[_main]', 'class', 'uk-container uk-container-center',
'new-container-class' );

Notice that both uk containers have been removed and instead replaced with the new-container-class class.
getbeans.io/code-reference/functions/beans_replace_attribute/
Markup ID, class, existing class name and then the new name.
beans_replace_attribute( string $id, string $attribute, string $value, string $new_value = null )
Add a new class above or below an existing class
Add a class above beans_main(tm-main).
beans_wrap_markup( 'beans_main', 'another-data-mark', 'div', array( 'class' => 'new-class' ) );

The new-class with the data-markup-id of another-data-mark has been added above the existing tm-main class.
From structure:
tm-main
To structure:
new-class
– tm-main
They are still tied together. Making the new-class the parent class of tm-main
Add a class below beans_main(tm-main).
beans_wrap_inner_markup( 'beans_main', 'another-data-mark', 'div', array( 'class' => 'new-class' ) );

The new-class with the data-markup-id of another-data-mark has been added below the existing tm-main class.
From structure:
tm-main
To structure:
tm-main
– new-class
They are still tied together. Making the new-class the child class of tm-main.
Creating a new CSS at the same level not as parent or child.
Question: How do I create a class that is not a parent (above in the same branch) or child (below in the same branch) but a stand alone class. So the structure looks like this:
tm-main
new-class
The answer:
add_action( 'beans_main_before_markup', 't_custom_section' );
function t_custom_section() {
?>
<div class="custom-code"></div>
<?php
}
beans_main_before_markup adds a new CSS class named custom-code before the tm-main class. I added the new class and styled it. Which can be seen below in the screenshot where I have inspect open.

Hooks that can be used.
Example from https://wpbeansframework.com/add-a-widget-area/
beans_header_before_markup = Full width. Top of page. Before beans header
beans_fixed_wrap[_header]_prepend_markup = Fixed width. Inside the header wrap. Adjust header and prepend to another option and keep the fixed width.
beans_header_prepend_markup = Full width. Just above the title and menu.
beans_header_append_markup = Full width. At the end of the header.
beans_header_after_markup = Full width. After header.
Resources:
community.getbeans.io/discussion/menu-questions/
getbeans.io/documentation/customization-overview/
getbeans.io/documentation/markup-and-attributes/
getbeans.io/code-reference/functions/beans_add_attribute/
getbeans.io/code-reference/functions/beans_replace_attribute/
getbeans.io/documentation/using-actions
community.getbeans.io/discussion/i-think-i-nearly-get-it-but-i-dont/
Question: How do I create a class that is not a parent (above in the same branch) or child (below in the same branch) but a stand alone class. So the structure looks like this:
tm-main
new-class
Any answer to it yet?
Hi Annapurna
I am working on getting an answer to this question. I will edit the post and also edit this reply to you when I get the answer.
Thanks for asking!
EDIT: A big thank you to Trevor for helping me with the code! The example is now added above.