Pure CSS left sidebar

[Yury]

I need to implement the left sidebar which should be adaptive for small screens.
The sidebar has a fixed width, located on left and the page direction is right-to-left.

My HTML layout is as follow:

<div class="clearfix"><!-- container -->
    <aside class="left-sidebar">
    </aside>

    <div class="content-holder">
    </div>
</div><!-- /container -->

CSS:

.left-sidebar { width: 250px; float:left; margin-right: 30px; }
.content-holder { width: 100%; }

Thus the content fills the remaining space.

I need this sidebar under the content section on devices with max-width 960px.

My implementation:

CSS:

@media (max-width: 960px) {
    .left-sidebar { float: none; width: 100%; }
}

JS:

<script type="text/javascript">
    jQuery( document ).ready(function( $ ) {
        $(window).bind("resize load", function(){
            if($(window).width() > 960 && !$("aside.left-sidebar").hasClass("at-left")){
                $("aside.left-sidebar").removeClass("at-bottom").addClass("at-left").insertBefore($(".content-holder"));
            }else if($(window).width() <= 960 && !$("aside.left-sidebar").hasClass("at-bottom")){
                $("aside.left-sidebar").removeClass("at-left").addClass("at-bottom").insertAfter($(".content-holder"));
            }
        });
    });
</script>

It works well, but I feel that it’s clumsy, so I am wondering if there is a CSS-only solution.

[Author]

Posts