Bootstrap 6-column responsive

css, html, responsive-design, twitter-bootstrap, twitter-bootstrap-3

Solution

Simply introduce a new set of columns:

<div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div1</div>
            <div class="col-sm-12 col-md-6" >div2</div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div3</div>
            <div class="col-sm-12 col-md-6" >div4</div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div5</div>
            <div class="col-sm-12 col-md-6" >div6</div>
        </div>
    </div>
</div>

JSFiddle demo.

Problem

I'm using a Bootstrap layout for my design and am about to make it responsive and saving needed order. For example the such as this: ``` <div class="row"> <div class="col-sm-4 col-md-2" >div1</div> <div class="col-sm-4 col-md-2" >div2</div> <div class="col-sm-4 col-md-2" >div3</div> <div class="col-sm-4 col-md-2" >div4</div> <div class="col-sm-4 col-md-2" >div5</div> <div class="col-sm-4 col-md-2" >div6</div> </div> ``` On md – viewports I’ll get like this: ``` div1 div2 div3 div4 div5 div6 ``` On sm- viewports: ``` div1 div2 div3 div4 div5 div6 ``` How could I reorder columns to get like this on sm-viewports: ``` div1 div3 div5 div2 div4 div6 ``` In others words – every even columns have to go down, and every odd column have to stay up. Is it possible?

Original source