解像度の切替サイズの設定方法

@media screen and (min-width:900px){ と言うのは、その画面サイズの時どういう表示にするかと言う意味です。
なので、

@media screen and (min-width:900px){
  #body-in{
    width: 100%; /*例です*/
  }
  #main{
    width: 558px;
  }
  #sidebar{
    width: 300px;
  }
}

このように@media … {}の中に{}が入っています。
仮にどのようにして2カラムにするかですが、どのように表示したいかにもよりますけれども、
#body-inのサイズを例えば100%(#containerあるいは#body幅にする)で、
#main + #sidebar(300px)がその100%の中に入ればよいわけです。#body-in100%の時の画面サイズが#main + #sidebar(300px)を超えると#sidebarが下に移動してしまうと思います。

@media screen and (min-width:900px){　で、画面幅が最低900pxあるわけですから、900-300pxで#mainが600pxあれば画面幅900pxの端末でも入るはずなので、そのあたりを調整するか#sidebar全体の幅を調整して#mainの方に幅をあげるかなどを考えないといけません。

＞hidekichiさん
＞わいひらさん

お忙しい中
ご回答ありがとうございます。

画面幅が900px以上の時は2カラムで
全体を1070px、#main　740px、sidebar　300pxとしたいと考えており
教えて頂いた通り以下のように記載してみたのですが
サイドナビは下に落ちてしまいます。

/* 画面幅が900px以上の時 */
@media screen and (min-width:900px){
/*#navi ul{display:block}*/

#body-in{
width: 1070px;
}
#main{
width: 740px;
}
#sidebar{
width: 300px;
}

.ad-sidebar{
margin-top:0;
}

#navi ul.sub-menu,
#navi ul.children{
display:none;
}

現状のスタイルシートファイルとしては以下となります。
どこか間違っているのでしょうか？
https://www.dropbox.com/s/l35zyxoh8imn8xk/style.css?dl=0

＞わいひらさん

Simplicity1.5.7の新機能を使い表示されました、ありがとうございます。