当我将尺寸减小到 480 像素时，我希望侧边栏向下移动，侧边栏内容使用媒体查询向上移动。？

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

主容器{

width: 100%;
float: right;
  
}

.首先{

    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; 

}

当我将屏幕调整为 480 像素时，我希望边栏内容 div 向上移动，边栏内容 div 向下移动

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

工作 fiddle: http://jsfiddle.net/1ssvwc3g/1/

下次为您的问题添加 fiddle。我花了 1 分钟找到了另一个与您的问题相关的话题：

#maincontainer { 
      display:flex; 
      flex-direction: column;
}
.first{ 
    order: 2 
}
.second{ 
    order: 1 
}