根據窗口大小重新排列內容

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搜索表單。 如果我將其放在主要內容之上（全屏顯示），並且不設置任何顯示，則ajax形式將不再起作用。 因此，我正在尋找一個JavaScript代碼段，以將框1的位置刪除，並在較小的屏幕上將其加載到主要內容上方。

Answer 1

我在示例中使用了隱藏類，請檢查並告知我...

更新小提琴

的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;
}