基於窗口大小重新排列內容

我需要根據窗口/屏幕大小重新排列某些內容。基於窗口大小重新排列內容

這是它的外觀在全時：

而這正是我需要的，當屏幕尺寸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

謝謝。但不能使用隱藏類。請檢查我的更新。 –

基於窗口大小重新排列內容

回答

相關問題