基于窗口大小重新排列内容

我需要根据窗口/屏幕大小重新排列某些内容。基于窗口大小重新排列内容

这是它的外观在全时：

而这正是我需要的，当屏幕尺寸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表单不再有效。所以我正在寻找一个JavaScript代码片段，从它的位置删除框1，并在较小的屏幕上将它加载到主要内容上方。

来源

2016-09-22 тнє Sufi

只有flexb牛可以重新安排divs的顺序，但不是在两个包装div中。（至少在此刻）。您可能需要重新构建或使用JavaScript。 –

尝试使用隐藏* * bootstrap的类以获取更多信息，请检查以下答案... –

@SunilGehlot不能使用隐藏类。请检查我的更新。 –

我已经使用隐藏类在我的例子请让我知道...

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

来源

2016-09-22 10:25:35

谢谢。但不能使用隐藏类。请检查我的更新。 –

基于窗口大小重新排列内容

回答

相关问题