Can I reposition AdSense ads with Javascript (for responsive purposes)?

Question

I have a responsive blog where ads are displayed in the sidebar. On mobile devices however, the sidebar is pushed to the bottom below the posts.

So what I'd like to do is move the ads from the sidebar and insert them into the post itself on mobile devices

I do this using javascript:

<div id="main">
    <div id="article">
        <div class="post">
            <p class="intro"></p>
            <p class="text"></p>
        </div>
    </div>
    <div id="sidebar">
        <div class="adbox-1"></div>
    </div>    
</div>

<script>
    jQuery(document).ready(function(){

        // AD REPOSITION
        if ($(window).width() < 769) {
            $('.ad-box1').insertAfter($('.intro'));           
        }
     });
</script>

The ads are always loaded in the sidebar, but if the screen width is below 768px, they will be moved somewhere else.

I wonder if this would violate AdSense terms of service?

Answer 1

I think @media-queries are simpler.

You load the two ad units and under 768px you hide one and show the other. This is valid.

The solution you are using is good but as you insert the new ad unit under 768, you also need to remove the other.

This guide from Google explains what you can't do:

1. Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit.
2. Implementing AdSense ad code in a way that covers content
3. Using any means to force the display of more than three AdSense ad units on a page
4. Manipulating the ad targeting using hidden keywords, IFRAMEs, or any other method
5. Distributing ads in emails or software
6. Floating ads or units that slide to attract unwarranted attention

Media queries are possible.

Anyway both of the approaches seems valid by Adsense.