Break out of nest on Mobile?

[Cessquill]

Hi - Say for the main part of a page I've got a 66:33 layout, and the 33% is nested with a couple of entries. I've therefore got several panels going down the right of the screen.

Is it possible, when I switch to tablet/mobile for the first of these panels to be 100% at the top of my grid? I can see how it would be done without nests and with push/pull logic, but I'm a little stuck in this scenario. Do I need to look into Sass for this (haven't yet).

If this isn't clear - say I've got a "Coming Soon" box in the right border, followed by a Facebook panel and maybe some related content/ads directly below - all in the same column. When I switch to a thinner design I want the Coming Soon to flow across the top at 100%, but the rest of the content to flow below the body of my page.

Any advice gratefully received.

[nathansmith]

Can you show some example code? That would help me visualize what you mean.

[Cessquill]

Of course, sorry...

<div class="grid-container">
  <div class="grid-100">
    <div class="header">...header...</div>
  </div>

  <div id='navigation' class="grid-15 tablet-grid-25 mobile-grid-100">
    <div class='navPanel'>...navigation links...</div>
  </div>

  <div class="grid-60 tablet-grid-75 mobile-grid-100 grid-parent">
    <div class="grid-100">
        <div class='mainContent panel'>
            <h1>Main Column</h1>
            <p>This is the main column.</p>
        </div>
    </div>
    <div class="grid-100">
        <div class='mainContent panel'>
            <h1>Main Column, second panel</h1>
            <p>I might have several main panels</p>
        </div>
      </div>
  </div>

  <div class="grid-25 tablet-grid-100 mobile-grid-100 grid-parent">

    <div class="grid-100 tablet-grid-50 mobile-grid-100">
        <div class='comingSoon'>...Coming Soon in in right border...</div>
    </div>
    <div class="grid-100 tablet-grid-50 mobile-grid-100">
        <div class='other'>...facebook panel / advertising / other content...</div>
    </div>

  <div class="grid-100">
    <div class="footer">...footer...</div>
  </div>

</div>

In theory, I would like the "Coming Soon" panel in the right border on desktop, but switch to 100% wide and be just below the header on smaller devices. Because it is in a nest with subsequent panels, I'm not sure it's possible (still learning).

I'm thinking that I either need to duplicate the content on the page and show/hide it based on size, or trigger some JQuery to move it. Or just redesign around it.

Thanks for your time.