響應式移動中的3列布局第一列到第一列頂部

我的問題很簡短，準確。我已經Google搜索，但沒有發現任何關於這一點。響應式移動中的3列布局第一列到第一列頂部

目前我有三欄佈局

---------------------------- 
|left|the-main-column|right| 
----------------------------

實際代碼：

<div class="main"> 
    <div class="col-left sidebar"> 
     <div class="left-sidebar-nav"></div> 
    </div> 
    <div class="col-main"></div> 
    <div class="col-right sidebar"> 
     <div class="right-sidebar-cart"></div> 
    </div> 
</div>

1.什麼我要的是在左側立柱頂部移到右側立柱

----------------------- 
|right|the-main-column| 
-------    | 
|left |    | 
----------------------- 

<div class="main"> 
    div class="col-right sidebar"> 
      <div class="right-sidebar-cart"></div> 
    </div> 
     <div class="col-left sidebar"> 
      <div class="left-sidebar-nav"></div> 
     </div> 
     <div class="col-main"></div> 
</div>

2.或沒有包裝的右欄內容到左欄

_______________________ 
|right|the-main-column| 
|left |    | 
----------------------- 

<div class="main"> 
     <div class="col-left sidebar"> 
      <div class="right-sidebar-cart"></div> 
      <div class="left-sidebar-nav"></div> 
     </div> 
     <div class="col-main"></div> 
</div>

這隻能用CSS來完成嗎？什麼是JavaScript/jQuery解決方案？我另外感興趣的是我的第二個問題的解決方案，類似的我將滑塊從主列移動到左側邊欄的頂部。

來源

2013-09-27 Skyzer

這需要支持哪些瀏覽器？ –

您知道在響應式設計中，您保持HTML完全相同，但僅更改CSS（通過媒體查詢）？對？ – Steve

@Sean Vieira，主要瀏覽器。 – Skyzer

第1部分可以完成。喜歡的東西：

<div class="right">right</div> 
<div class="left">left</div> 
<div class="main">main</div>

（順序事項），再加上：

.right { 
    float: left; 
} 

.left { 
    float: left; 
    clear: left; 
} 

@media only screen and (min-width: 780px) { 
    .right { 
    float: right; 
    } 
}

例子：http://codepen.io/paulroub/pen/baivl

不是100％肯定你問在＃2什麼。

來源

2013-09-27 16:21:17

嗨，這不是我的選擇，因爲如果我先把HTML放在正確的柱子上，那麼我必須改變一切。我已經包含了我的真實代碼 – Skyzer

-1

它取決於你的標記。如果你提供一些實際的代碼幫助將是很多easiery。你不能將你的內容從一個容器移動到另一個容器嗎？

基本上它應該只在CSS中可行，但有關您的實際代碼的信息很少，我無法真正看到您想要的。

來源

2013-09-27 16:22:43 KreaTief

嘿，我已經添加了實際的代碼 – Skyzer

響應式移動中的3列布局第一列到第一列頂部

回答

相關問題