CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
Skyzer
Skyzer

Reputation: 592

3 column layout in responsive move 3rd column into/on top of 1st column

My question is short and precise. I have googled but haven't found anything about that.

Currently I have 3 column layout

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

Actual code:

<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.What I want is to move the right column on top of left column

-----------------------
|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.Or the right column contents without the wrapper to the inside of left column

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

Could this be done only with CSS ? What is the javascript/jquery solution for that? I am additionally interested in my 2nd question solution cause by analogously I'll move slider from main column to the top of left sidebar.

Upvotes: 1

Views: 1419

Answers (2)

KreaTief
KreaTief

Reputation: 406

It does depend on your markup. If you'd provide some Actual Code helping would be a lot easiery. Can't you move your content just from one container into the other?

Basically it should definitely be doable in CSS only, but with that few information about your actual code I can't really see what you want.

Upvotes: -1

Paul Roub
Paul Roub

Reputation: 36438

Part 1 can be done. Something like:

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

(the order matters), plus:

.right {
  float: left;
}

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

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

Example: http://codepen.io/paulroub/pen/baivl

Not 100% sure what you're asking in #2.

Upvotes: 2

Related Questions