javascript - 响应式3列布局将第3列移入第1列/在第1列顶部

我的问题简短而准确。我已经用谷歌搜索，但是没有找到任何关于那的信息。

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

最佳答案

第一部分可以完成。就像是：

<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％确定您在第二项中的要求。

关于javascript - 响应式3列布局将第3列移入第1列/在第1列顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19055494/