0

I have a design where on mobiles/tablets all the text is in one div but when on 'desktop' the p tags move to the div below it. (All divs have different background images).

Here's the markup -

<main>
    <div class="pane">
        <h2>A thing</h2>
        <p>This stuff needs to jump to pane-details below when around 48em</p>
    </div>
    <div class="pane-details">
        <p></p>
    </div>
    <div class="pane">
        <h2>Another thing</h2>
        <p>This stuff needs to jump to pane-details below when around 48em</p>
    </div>
    <div class="pane-details">
        <p></p>
    </div>
    <div class="pane">
        <h2>A third thing</h2> 
        <p>This stuff needs to jump to pane-details below when around 48em</p>
    </div>
    <div class="pane-details">
        <p></p>
    </div>
    <div class="pane">
        <h2>A fourth thing</h2>
        <p>This stuff needs to jump to pane-details below when around 48em</p>
    </div>
    <div class="pane-details">
        <p></p>
    </div>
    <div class="pane">
        <h2>The last thing</h2>
        <p>This stuff needs to jump to pane-details below when around 48em</p>
    </div>
    <div class="pane-details">
        <p></p>
    </div>
</main>

Demo: http://codepen.io/sturobson/pen/aCqDc

So, when the page hits 48em (768px) the <p> in .pane needs to drop down into the following .pane-details

How do I do this without duplicating the content and nastily resorting to display: none;.

Machavity
  • 30,841
  • 27
  • 92
  • 100
Stuart Robson
  • 1,149
  • 4
  • 22
  • 42

1 Answers1

1

Use the window resize event:

$(window).on('resize'), function() {
    if ($(window).width()<768) {
        // move the element
    } else {
        // move it back
    };
}).trigger('resize'); // force it to run on load

However, you can probably solve this with pure CSS if you rethink your HTML layout a little.

Community
  • 1
  • 1
Blazemonger
  • 90,923
  • 26
  • 142
  • 180