CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Bas
Bas

Reputation: 2400

Bootstrap col-md-* orderering when mobile view

I have the following bootstrap. When display on mobile i am getting

aaa

bbb

ccc

Is it possible to change the order by mobile view to

bbb

aaa

ccc

<div class="container innerrow">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-4">
                aaa
            </div>
            <div class="col-md-4">
                bbb
            </div>
            <div class="col-md-4">
                ccc
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 600

Answers (3)

gianni
gianni

Reputation: 1357

You can use the bootstrap helper classes with no need for flex-box ( provided you can edit the HTML).

<div class="container innerrow">
<div class="row">
        <div class="col-md-4 col-md-push-4">
            bbb
        </div>
        <div class="col-md-4 col-md-pull-4">
            aaa
        </div>
        <div class="col-md-4">
            ccc
        </div>
</div>

codepen: https://codepen.io/giannidk/full/VWPzMO

Upvotes: 1

Rithwik
Rithwik

Reputation: 1198

You could get this result without using flex boxes (which are only supported in IE 11+), albeit with some repetition of your code, as follows.

<div class="container innerrow">
    <div class="row">
        <div class="col-md-12">
            <div class="a1 col-md-4 col-hidden-xs">
                aaa
            </div>
            <div class="b col-md-4">
                bbb
            </div>
            <div class="a2 col-md-4 col-visible-xs">
                aaa
            </div>
            <div class="c col-md-4">
                ccc
            </div>
        </div>
    </div>
</div>

So for xs-screens the first div will be hidden and the third one becomes visible.

Upvotes: 0

Dmitry Demidovsky
Dmitry Demidovsky

Reputation: 8197

CSS Flexbox allows element reordering:

HTML

<div class="container innerrow">
    <div class="row">
        <div class="col-md-12 flex">
            <div class="a col-md-4">
                aaa
            </div>
            <div class="b col-md-4">
                bbb
            </div>
            <div class="c col-md-4">
                ccc
            </div>
        </div>
    </div>
</div>

CSS

.flex {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 700px) {
  .a { order: 2 }
  .b { order: 1 }
  .c { order: 3 }
}

See example.

a good guide to Flexbox

Upvotes: 0

Related Questions