<div class="full-width">
<div class="content-inner vc_col-sm-5">
<p>This is some text This is some text This is some text</p>
</div>
<div class="slide-show vc_col-sm-7">
<img src="imageher.jpg" alt="big image">
</div>
这是我的代码，当窗口小于859px时，我想更改为div框的possistion。我想这样：
<div class="full-width">
<div class="slide-show vc_col-sm-7">
<img src="imageher.jpg" alt="big image">
</div>
<div class="content-inner vc_col-sm-5">
<p>This is some text This is some text This is some text</p>
</div>
我该怎么做jQuery代码？
这其实很简单。只要屏幕小于859像素，就可以将“float：right”添加到“content-inner”。
我在这里贴了一个小提琴https://jsfiddle.net/q2x5xsu0/
@media screen and (max-width: 859px) {
.content-inner {
float: right;
}
}
首先，您需要检查这样的窗口大小
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
然后改变你的立场
write the "JavaScript":
<body onload="fnChange()">
<div class="full-width">
<div class="content-inner vc_col-sm-5" id="dvSmall">
<p>This is some text This is some text This is some text</p>
</div>
<div class="slide-show vc_col-sm-7" id="dvBig">
<img src="imageher.jpg" alt="big image">
</div>
</body>
=>Javascript code:
<script>
function fnChange()
{
if(screen.width < 859)
{
$("#dvSmall").insertAfter("#dvBig");
}
}
</script>
看看$ .resize（）api：https://api.jquery.com/resize/
您可以使用$（window）.width（）获取窗口大小;
所以把它们放在一起
<div class="full-width">
<div class="content-inner vc_col-sm-5">
<p>This is some text This is some text This is some text</p>
</div>
<div class="slide-show vc_col-sm-7">
<img src="imageher.jpg" alt="big image">
</div>
<script>
$(window).resize(function() {
var w = $(window).width();
if(w < 859) {
//make changes for small configuration
} else {
//make changes for large configuration
}
});
</script>