Blaataap Blaataap - 4 months ago 18
CSS Question

responsive set middle column on top

So i have a traditional three column lay-out. The left column is like a toolbox column, the middle column is the "dynamic content" column and the right one is like a summary of data column.

What i want to achieve is that as soon as some responsiveness is going on that the center column will be on top. This will be the most important part of the website and thus should be on top. I cant seem to get this to work with bootstrap. This is my lay-out:

<div class="container">
<!-- Example row of columns -->
<div class="row">
<!-- column: left -->
<div class="col-md-2" id="sidebarleft">left </div>
<!-- column: center-->
<div class="col-md-8" id="main">middle</div>
<!-- column: right -->
<div class="col-md-2" id="sidebarright">right</div>
</div>
</div>


So how would i go about achieving this?

Thanks!

Answer

This should do the trick.

So the layout is intact when the browser is using Bootstrap's "md" viewport, however when made smaller (so "sm" and "xs") the middle column is at the top followed by the left and right.

<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <!-- column: center-->
        <div class="col-md-8 col-md-push-2" id="main">middle</div>
        <!-- column: left -->
        <div class="col-md-2 col-md-pull-8" id="sidebarleft">left </div>
        <!-- column: right -->
    <div class="col-md-2" id="sidebarright">right</div>
</div>

Comments