0

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>
Community
  • 1
  • 1
naman
  • 52
  • 1
  • 10
  • You shoul describe more accurately your question: what is your actual problem? – il_raffa Jul 12 '15 at 14:46
  • If you view this code in 480 resolution you will see position of side bar div is top and position of side bar content div is bottom i want the opposite position of the side bar content div must be at the top and side bar div at the bottom using media query only. – naman Jul 12 '15 at 14:54
  • Your document should be arranged semantically--the content that you want to appear first should be first in the markup. Then, use classes that are descriptive of their functions, not their order in the page. – isherwood Jul 14 '15 at 15:14

1 Answers1

0

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 
}
Community
  • 1
  • 1
Someone
  • 257
  • 3
  • 12