Jquery 更改div窗口的位置正在调整大小

大家好我有两条最新新闻slider

<div id="topcontent">
  <div id="latestnews"> Content1  </div>
  <div id="slider">   content2   </div>
</div>

---

当宽度达到767px时，先放置内容1，然后放置内容2，实际上，当宽度达到767px时，需要先放置内容2。如何以不同的宽度重新排列div。请帮帮我。

也在

#滑块中使用浮动，而不是
边距：0 33%

#slider {
/*margin:0 33%;*/
float: right;
width:67%;
position:relative;

}

使用
Float:right
属性来实现此目的

演示
尝试位置属性和向左浮动

@media handheld, only screen and (max-width: 767px) {

  #latestnews {
    float:left;
    width:100%;
    position:relative;
  }

  #slider {
    margin:0;
    width:100%;
    float:left;
    position:absolute;
  }

} 

这里有一种使用绝对定位的方法

@media handheld, only screen and (max-width: 767px) {
    #topcontent {
        position: relative;
    }
    #latestnews {
        margin: 51px 0 0 0;
        width: 100%;
        color: red;
    }
    #slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin:0;
        width: auto;
        height: 50px;
        display: inline-block;
        border: 1px dotted blue;
    }
}

如果你有一个滑块，你可以有一个固定的高度。如果是这种情况，请将
#滑块
绝对定位到父块顶部，然后向
#latestnews
元素添加上边距，以避免元素重叠

请参见演示：

或者，您可以使用JavaScript或jQuery重新排列DOM元素，然后使用浮动
 但宽度较小的位置不会根据我的需要进行更改，如果是这样，只需启用边距并保持浮动即可
@media handheld, only screen and (max-width: 767px) {
    #topcontent {
        position: relative;
    }
    #latestnews {
        margin: 51px 0 0 0;
        width: 100%;
        color: red;
    }
    #slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin:0;
        width: auto;
        height: 50px;
        display: inline-block;
        border: 1px dotted blue;
    }
}