如何在响应中更改div位置

Question

This is my website which I am working on.

As you can see there is a sidebar in desktop mode. But when you see it in mobile mode the sidebar goes down under the content which is showing on the left side.

Now what I want in mobile view is to make sidebar appear on top, and after that the content should appear. I've tried lots of things like position:absolute; and margin but it's not working for me.

Please suggest what would be the correct way to do this task.

jsFiddle of my code

This works for me

<script type="text/javascript">

var windowWidth = $(window).width();
//window.alert(windowWidth);
if(windowWidth<=767){
    $('.wf-span-4').insertBefore('.wf-span-8');
    }
    </script>

Answer 1

You should probably provide a simplified version of your code, however, here's what I've got.

You have one of two options:

1. change the structure of the site so that the order is reversed in the first place.
2. Use jquery to move the content below a certain width ex: $('#sidebar').insertBefore('#content')

Answer 2

The correct way imo would be to put your markup in the right order to begin with. Markup is structure and should be independent of styling (as much as possible).

Then your code would look something like this

<section class="main">
    <div class="sidebar">Bye</div>
    <main class='content'>Hi</main> 
</section>

And all you would have to do is remove the floats on mobile, so the content goes back into the default flow. Something like this:

.content {
    width:75%;
    float:left;
}
.sidebar {
    width:25%;
    float:right
}

@media screen and (max-width:767px) {
    .content, .sidebar {
        float: none;
    }
}

(note that I updated your class names and markup, just so the code would be a bit better readable)

And here is your updated demo: http://jsfiddle.net/ehozb5v9/2/