Q:

When i reduce size to 480 px i want sidebar to move down and side bar content to move up using media query.?

maincontainer{
width: 100%;
float: right;
  
}

.first{
    float: left;
    width:50%;
    background-color: antiquewhite;
    min-height: 20%;
    text-align: center;
    font-family: cursive;
    font-size:24px; 
   

}
.second{

    float: right;
    width: 50%;
    background-color: aqua;
    min-height: 20%;
    text-align: center;
    font-family: cursive;
    font-size:24px; 

}

I want the side bar content div to move up and side bar div to move down when i resize my screen to 480 px
@media all and (min-width:320px) and (max-width:480px)  {

.first{

    width: 100%;
    float: right !important;   

}

.second{

    width: 100%;
    float: left !important; 

}
}

<div id="maincontainer">

    
    <div class="first">Side Bar </div>

    <div class="Second">Side Bar Content </div>

</div>

A:

Working fiddle: http://jsfiddle.net/1ssvwc3g/1/
Next time add a fiddle to your problem. Took me 1 minute to find another thread with your problem: https://stackoverflow.com/a/27374063/1410735
#maincontainer { 
      display:flex; 
      flex-direction: column;
}
.first{ 
    order: 2 
}
.second{ 
    order: 1 
}

