Javascript 响应式移动中的3列布局将第3列移动到第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>

_______________________
|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>

-----------------------
|右|主栏|
-------               |
|左||
-----------------------
div class=“col right sidebar”>

2.或左栏内侧没有包装的右栏内容

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

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

第1部分可以完成。比如：

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

例如：

---

不能100%确定你在第2部分中的要求是什么。

第一部分可以做到。比如：

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

例如：

---

无法100%确定您在#2中的要求。

这取决于您的标记。如果你能提供一些实际的代码帮助，那就容易多了。您不能将内容从一个容器移动到另一个容器吗

---

基本上，它应该只在CSS中是可行的，但是关于你的实际代码的信息很少，我真的看不出你想要什么

这取决于您的标记。如果你能提供一些实际的代码帮助，那就容易多了。您不能将内容从一个容器移动到另一个容器吗

---

基本上，它应该只在CSS中是可行的，但是关于你的实际代码的信息很少，我真的看不出你想要什么

这需要支持哪些浏览器？您知道在响应式设计中，您保持HTML完全相同，但仅更改CSS（通过媒体查询）？对吗？@Sean Vieira嗯，主要的浏览器。@Steve是的，我喜欢。。。我已经添加了Jquery代码，我有当前浏览器，或者IE8+？使这变得更容易，但它仅在IE 10+中受支持。这需要支持哪些浏览器？您知道，在响应式设计中，您保持HTML完全相同，但仅更改CSS（通过媒体查询）？对吗？@Sean Vieira嗯，主要的浏览器。@Steve是的，我喜欢。。。我已经添加了Jquery代码，我有当前浏览器，或者IE8+？使这更容易，但它只在IE 10+中受支持。嗨，这不是我的选择，因为如果我先在HTML中输入正确的列，那么我必须改变一切。我已经包括了我真正的代码嗨，这不是我的选择，因为如果我在HTML中的权利栏，然后我必须改变一切。我已经包括了我的真实代码