Перемещение divs с нажатием и нажатием

Question

Я читал много документации, но я не могу переделать некоторый порядок divs. Это мой код

<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> 

Я хочу, чтобы меню было над ползунком (оба с размером столбца 16), когда экран входит в sm. Является ли это возможным?

Answer 1

Использование Flexbox:

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

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

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