Conditional WPML Language selector placement

Hi,
I am using WPML, Woocommerce and the Storefront theme to create a multilanguage site.

After fiddling with the configuration options of WPML for a while, I decided I would use the

<?php do_action('wpml_add_language_selector'); ?>

line to display the language switcher above the standard search field of Storefront. For this I edited the inc/woocommerce/storefront-woocommerce-template-functions.php file like this:

	function storefront_product_search() {
		if ( is_woocommerce_activated() ) { ?>
			<div class="site-search">
/** MAK BEGIN **/
				<?php do_action('wpml_add_language_selector'); ?> 
/** MAK END **/
				<?php the_widget( 'WC_Widget_Product_Search', 'title=' ); ?>
			</div>
		<?php
		}
	}

(Let’s not worry about child themes, etc please.)

This works fine on desktop screens.

However, whenever the site is displayed on a mobile screen or in a narrow browser window, the theme switches to mobile layout as expected, and the language selector goes to an unusable location, actually still obeying the code and displaying itself above the search area, which now is at the very bottom of the screen, resulting in an unusable selector.

Could you please help me in finding out what to do in order to display the language selector on top of the search field only when the normal layout is active, and somewhere more usable (like in the toplevel menu?) on mobile layout?

Best regards
Arifi Koseoglu