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

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