javascript - 响应式的 3 列布局将第 3 列移入/位于第 1 列之上

Question

我的问题简短而准确。我用谷歌搜索但没有找到任何相关信息。

目前我有 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 解决方案？我对第二个问题的解决方案也很感兴趣，因为类似地，我会将 slider 从主栏移到左侧边栏的顶部。

Answer 1

第 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 中问的是什么。