横幅が1150px未満でもサイドバーを横に表示させたい

何か簡単にやれる方法はないかなと考えてみましたが、思い付きません。ご希望のカスタマイズは、そこそこ重労働です。

ちょっとフォーラムでは対応できないかもしれません。

子テーマCSSに以下を追記すれば良いかと思われます。

@media screen and (min-width: 900px) and (max-width: 1110px) {
	div#body-in {
		width: 100%;
		margin: 0;
	}
	#main {
		width: calc(70%);
		margin-left: 10px;
	}
	div#sidebar {
		width: calc(25%);
		float: right;
		clear: none;
		padding: 0 15px;
	}
	/*#mobile-menu {
		display: none;
	}*/
}

こんな感じのイメージですが、Chromeでザックリやってみた感じなので微調整はあまりしてません。
GIF画像
http://netakiri.net/uploader/src/up0456.gif

あら。かうたっくさんが先にご提案されていた。

サイドバーの幅を固定するタイプを作りました。せっかくなので一応書いておきます。想定しているのは右サイドバーです。

https://notepad.pw/share/8w2v00au2

画面幅 900px まで、サイドバーとメインカラムを横並びにすることしか考えていません。「既存のサイトの横幅が 900px 程度で、このサイズを変えずに移行したいので」という部分は考慮していません。

Akiraさん、かうたっくさん、ありがとうございました。
お２人のcssを参考にして、
サイドバーを横に表示させることができました。

調整しながら、記述すると、以下のようなcssができました。
このままでも満足なのですが、
（830pxから、1110pxの間の場合で、）
ヘッダーとナビはセンター寄せになるのですが、
ボディ（サイドバーとメイン）が右寄せになってしまいます。
margin: autoがボディに効いていないと思うのですが、
どのようにすれば、すべてが画面の中央に配置できるのでしょうか。
https://notepad.pw/0y49f01y

まだ、１ページしか作成していませんが、
移行中のサイトは以下になります。
http://stay-samui.com/wp/samui_weather.html

taka さんの CSS を微調整してみました。

@media screen and (min-width: 830px) and (max-width: 1110px) {
  div#header-in,
  div#navi-in {
    padding: 0;
    width: 100%;
  }
  div#body-in {
    width: 830px;
  }  
  #mobile-menu {
    display: none;
  }
  #header {
    max-width: 830px;
    margin: auto;
  }
  #navi {
    max-width: 830px;
    margin: auto;
  }
  #body {
    margin: auto;
  }
  #footer {
    margin: auto;
  }	
  #navi ul {
    border: 1px solid #ddd;
    display: block;
  }
  #navi ul li {
    float: left;
  }
  #navi ul li a {
    font-size: 14px;
    padding: .3em .7em;
  }
  #main {
    margin-left: 10px;
    float: right;
    width: 520px;
  }
  div#sidebar {
    box-sizing: border-box;
    clear: none;
    float: left;
    padding: 0;
    width: 280px;
  }
}

Akiraさんにお直し頂いたCSSをそのまま貼りました。
素晴らしい見栄えになり、感動しました。
CSSについて、まったくの初心者で修業中の身ですが、
問題箇所がわかり、とても勉強になりました。
ありがとうございました。
Simplicity2のレスポンシブ、素晴らしいですね。