根据窗口大小重新排列内容

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搜索表单。如果我将它放在主要内容（全屏）上并设置display none，则ajax表单不再起作用。所以我正在寻找一个javascript代码段来从它的位置删除第1个框，并在较小的屏幕上将其加载到主要内容之上。

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