ウィンドウサイズに基づいてコンテンツを並べ替える

Question

ウィンドウ/スクリーンサイズに基づいていくつかのコンテンツを並べ替える必要があります。

これは時にフルで、それがどのように見えるかです：

そして、これは画面サイズ768以下のとき、私は必要なものである：

は、これは私のコードの構造です：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-9 site-main-content"> 
      <div class="content"> 
       <!--Main content--> 
      </div> 
     </div> 

     <div class="col-md-3 site-sidebar-content"> 
      <div class="box-1"></div> 
      <div class="box-2"></div> 
      <div class="box-3"></div> 
     </div> 
    </div> 
</div> 

これを実現する方法がわかりません。

更新：私は隠されたプロパティを使用できません。ボックス1にはいくつかのAjax検索フォームが含まれています。メインコンテンツ（フルスクリーン上）の上に置き、ディスプレイnoneを設定すると、ajaxフォームはもう動作しません。だから私はそれが場所からボックス1を削除し、小さな画面上のメインコンテンツの上にロードするjavascriptスニペットを探しています。私がチェックし、私に知らせてください私の例では隠されたクラスを使用していた

Answer 1

...

Updated Fiddle

HTML

<div class="row"> 
    <div class="col-md-9"> 
     <div class="box-1 hidden-md hidden-lg"> 
     Box 1 
     </div> 
     <div class="mainBox"> 
     <div class="content"> 
      Main Content 
     </div> 
     </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="box-1 hidden-xs hidden-sm"> 
     Box 1 
    </div> 
    <div class="box-2"> 
     Box 2 
    </div> 
    <div class="box-3"> 
     Box 3 
    </div> 
    </div> 
</div> 

CSS

.mainBox{ 
    background:green; 
    min-height:300px; 
    padding:10px; 
    margin-bottom:10px; 
} 
.box-1{ 
    background:red; 
    min-height:100px; 
    padding:10px; 
    margin-bottom:10px; 
} 
.box-2, .box-3{ 
    background:#00A2E8; 
    min-height:100px; 
    padding:10px; 
    margin-bottom:10px; 
}