0

I have been reading a lot of documentation but I cannot succeed re-arranging some divs order. This is my code

<div class="container">

    <div class="row">
        <div class="col-md-11">
            <div class="slider">
                The slider
            </div>
        </div>
        <div class="col-md-5">
            <nav class="main-menu">
                The Menu
            </nav>
        </div>
    </div>

</div>

I want the menu to be over the slider (both with 16 column size) when screen enters sm. Is it possible?

Alan
  • 2,559
  • 4
  • 32
  • 53

1 Answers1

0

Use flexbox:

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

@media (max-width: 500px) {
  .row > div:first-child {
    order: 2;
  }
}

http://codepen.io/antibland/pen/aNRZRJ

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
  • Sorry, I'm looking for a Twitter Bootstrap oriented solution. Your code would destroy my entire layout – Alan Apr 28 '16 at 05:34
  • Have you looked at this already? [Bootstrap 3 changing div order on small screens only](http://stackoverflow.com/questions/20671303/bootstrap-3-changing-div-order-on-small-screens-only) – Andy Hoffman Apr 28 '16 at 05:36