in most cases these columns will be inside a color-section. Inside that section the one that should scroll has to be with huge content. the other one with less.
Do not use the equal height option on the coluns!

i would give a custom class to that section! f.e. : sticky-parent (this is not the direct parent of those columns. But we can address now better – and use it for that case generally.
The column that should stick got the custom class: sticky-element

then we have:
(we can have the overflow setting inside the media query too – it only needs to work there)
NB: the media query min-width depends on your setting where the columns should go to 100% width – if it is 989px then change that value

@media only screen and (min-width: 767px) {
  .responsive #top {
    overflow-x: visible !important;
  }
  .responsive #top #wrap_all {
    overflow: visible !important;
  }
  #top .sticky-parent .entry-content-wrapper {
    display: flex;
  }
  #top .sticky-element { 
    height: unset !important;
    width: unset !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 80px;
    align-self: flex-start;
    min-width: 40%;
  }
}

again – see: https://webers-testseite.de/sticky-elements/

ok now you got 2columns besides each other.
if you follow my link for the instructions – you see that the direct parent had to be the flex container.

just for you to test ( better would be to use custom classes to be more specific.

.responsive body#top.blog,
.responsive body#top.wp-singular {
  overflow-x: visible !important;
}

.responsive body#top.blog #wrap_all ,
#top.wp-singular #wrap_all{
  overflow: visible !important;
}

@media only screen and (min-width: 767px){ 
  #after_section_1 .av-column-wrapper-individual {
    display: flex;
  }

  #after_section_1 .av-column-wrapper-individual .flex_column:nth-child(2){
    height: unset !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 180px;
    align-self: flex-start;
    flex: 0 1 40%
  }
}

maybe a mod knows a better way to shift the quick css input field to top of the styling options section.
(I was familiar with that filter because I had used it before to place a new input field for Apple Touch icons behind the favicon.)

/**
 * Custom function to reorder Enfold theme options.
 * Moves the 'Quick CSS' input field above the 'Color Scheme' selector.
 * Assumes both 'quick_css' and 'color_scheme' elements are always present.
 */

function custom_enfold_reorder_styling_options($avia_elements) {
    $quick_css_option = null;
    $color_scheme_option_index = -1;
    $quick_css_option_index = -1;

    // Find the 'quick_css' and 'color_scheme' options and their original indices.
    foreach ($avia_elements as $index => $element) {
        if (isset($element['id']) && $element['id'] === 'quick_css') {
            $quick_css_option = $element;
            $quick_css_option_index = $index;
        }
        if (isset($element['id']) && $element['id'] === 'color_scheme') {
            $color_scheme_option_index = $index;
        }
    }

    if ($quick_css_option_index > $color_scheme_option_index) {
        // Remove the 'quick_css' option from its original position.
        array_splice($avia_elements, $quick_css_option_index, 1);
        array_splice($avia_elements, $color_scheme_option_index, 0, [$quick_css_option]);
    }

    // Return the modified array of theme options.
    return $avia_elements;
}

// Hook into Enfold's option page data initialization filter.
add_filter('avf_option_page_data_init', 'custom_enfold_reorder_styling_options', 10, 1);

you are talking about the news sites?

but if there are additonal columns below – what should happen?

have a look to one of your news pages or the blog page itself:

.responsive body#top.blog,
.responsive body#top.wp-singular {
  overflow-x: visible !important;
}

.responsive body#top.blog #wrap_all ,
#top.wp-singular #wrap_all{
  overflow: visible !important;
}

@media only screen and (min-width: 767px){  
  .responsive body#top.blog .sidebar_right .container,
  #top.wp-singular .sidebar_right .container{
    display: flex;
  }

  .responsive body#top.blog .sidebar ,
  #top.wp-singular .sidebar{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 180px;
    align-self: flex-start;
    flex: 0 1 30%
  }
}

but that does not work with following sections under the sticky container.

Good morning, the page https://easyzanzibar.com/dove-alloggiare-a-zanzibar/ loads a large image even when opened on mobile. In your test, you show me that it should use a 218 Kb image in the desktop slide, while my optimized image is 141 kb. If it then always uses the large image on mobile, what kind of optimization is that?

The technical programmers who are trying to solve the problem of a very slow site and CPU that exceeds the limit have sent me reports stating: ‘Enfold is a heavy and outdated theme for a site like yours.’

If this is the case, I have to eliminate Enfold from all four of my websites and completely redo them.

Does it turn out that Enfold creates problems with slow loading and high CPU demand for sites like ours?

AI answers:
Regarding your question about Enfold:
Yes, it is a known issue that the Enfold theme can sometimes cause slow loading times and high CPU usage for some websites. This can be due to several factors:
Theme Features: Enfold is a feature-rich theme, and while this offers a lot of flexibility, it can also lead to more code and assets that need to be loaded, potentially slowing down the site. Some of these features, if not used, can still contribute to the load.
Image Handling: As you’ve noticed, how the theme handles images across different devices can impact performance. If the theme isn’t correctly serving optimized images for mobile, it can significantly slow down loading times on those devices.

I would like to understand from you if there is anything that can be done to avoid redoing everything

If you use more specific selectors, you can style “strong” differently.

if you want it only on some words in a textblock you had to use the way above from Rikard.
for example if you like to have a different color for them only on one page – use the page ID :

#top.page-id-12345 strong {
  color: black;
}

sometimes it might be necessary to have an !important on the value. (black !important;)

PS: if you are editing text-blocks the editor could do that for you
this will create an inline-style:
<span style="color: #ff0000;"><strong>Important</strong></span>

see here on very small screens: https://webers-web.info/datenschutz/
that sidebar menu on the left goes to a hamburger on top right on small screen width.

you see on the link above (https://jonsuh.com/hamburgers/) – and (on enfold main burger DOM ) what are the class names – i used them too – because then a predefined look is allready present.:
and the script to manage the burger is allready loaded

(page-id-3 – is my privacy page)

add_action('ava_after_main_menu', function() {
	if ( is_page(3)){
		echo '<nav class="datenschutz-menu" role="navigation">';
		echo '<div class="container av-menu-mobile-active">';
		echo '<a href="#" class="mobile_menu_toggle no-scroll" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"><span class="av-current-placeholder">Datenschutz</span>';
		echo '<span class="subnav-hamburger subnav-hamburger--spin-r"><span class="subnav-hamburger-box"><span class="subnav-hamburger-inner"></span></span></span>';
		echo '</a>';
		echo do_shortcode('[menu name="datenschutz"]');	
	 	echo '</div>';
		echo '</nav>';
	}
});

on that line: echo do_shortcode('[menu name="datenschutz"]'); you see the usage of that menu shortcode

now i got that extra subnav-hamburger (this name is set by me – it only reminds me that this is subnavigation on privacy page )
now i have to have the same behaviour on that second burger menu:

function subnav_hamburger_first(){
if(is_page(array( 3))){ 
?>
<script>
(function($){
    var $subham = $(".mobile_menu_toggle");
    $subham.on("click", function(a) {
		$subham.find(".subnav-hamburger").toggleClass("is-active");
		$subham.next(".menu-datenschutz-container").find('#menu-datenschutz').toggleClass("av-open-submenu");
    });
	$('#menu-datenschutz li').on("click", function(b) {
		$(this).addClass('selected').siblings().removeClass('selected');
		$(this).parents('#menu-datenschutz').toggleClass('av-open-submenu');
		$(this).parents('.av-menu-mobile-active').find('.subnav-hamburger').toggleClass('is-active');
	});
})(jQuery);
</script>
<?php
}}
add_action('wp_footer', 'subnav_hamburger_first');

This is not a trivial request, which is why there are several paid plugins available. To grasp the complexity of a multilevel burger menu, take a look at the avia-snippet-hamburger-menu.js code.