Place navbar next to header text

The#navigation element comes after the #header, so you’d need to override some functions in your child theme:

// Reopen Header DIVs

function child_reopen_header() {
	remove_action('skeleton_header','skeleton_header_close', 5);
}
add_action('after_setup_theme','child_reopen_header');

// Apply new markup to #navigation

function skeleton_main_menu() {
	echo '<div id="navigation">';
	wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary'));
	echo '</div><!--/#navigation-->';
	// close header DIVs
	echo "</div>"."\n";
	echo "</div>"."\n";
	echo "<!--/#header-->"."\n";
}

add_action('skeleton_navbar','skeleton_main_menu', 1);

And add some CSS to your style.css:

#navigation {
	float: right;
	top: -40px;
}

To swap the sidebars, set your default width to right and override the posts/archive views via body class:

body.archive.sidebar-right #sidebar,
body.single-post.sidebar-right #sidebar {
	float: left !important;
}
body.archive.sidebar-right #content,
body.single-post.sidebar-right #content {
	float: right !important;
}

OK. Tried this. However, it seems to be problematic for the smaller screens. Would you need to change the CSS using Media Query?