Question

.vce-row {
    flex-direction: column;
}
global-elements…277104ee8181:1
.rtl .vce-row>.vce-row-content>.vce-col.vce-col--all-last, .rtl.vce-row>.vce-row-content>.vce-col.vce-col--all-last, .vce-row {
    margin-left: 0;
}
global-elements…277104ee8181:1
.vce-row, .vce-row-content>.vce-col:last-child, .vce-row>.vce-row-content>.vce-col.vce-col--all-last {
    margin-right: 0;
}
global-elements…277104ee8181:1
.vce-row, .vce-row-content {
    display: flex;
    position: relative;
}
bootstrap.min.css?ver=2.0.2:6
*, ::after, ::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
user agent stylesheet
div {
    display: block;
}
.vce-row--col-gap-30>.vce-row-content>.vce-col {
    margin-right: 0;
}
@media (min-width: 768px)
global-elements…277104ee8181:1
.vce-row--col-gap-30>.vce-row-content>.vce-col--md-50p {
    flex: 0;
    flex-basis: calc((100% - 2970px) * .5 + 1470px);
    max-width: calc((100% - 2970px) * .5 + 1470px);
}
@media (min-width: 768px)
global-elements…277104ee8181:1
.vce-row--col-gap-30>.vce-row-content>.vce-col {
    margin-right: 30px;
}
global-elements…277104ee8181:1
.vce-row--col-gap-30>.vce-row-content>.vce-col {
    margin-right: 0;
}
@media (min-width: 768px)
global-elements…277104ee8181:1
.vce-row--col-gap-30>.vce-row-content>.vce-col {
    margin-right: 30px;
}
global-elements…277104ee8181:1
.vce-row--col-gap-30>.vce-row-content>.vce-col {
    margin-right: 0;
}
@media (min-width: 0)
global-elements…277104ee8181:1
.vce-col--xs-1 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
global-elements…277104ee8181:1
.vce-col {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 1em;
    position: relative;
}
bootstrap.min.css?ver=2.0.2:6
*, ::after, ::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
user agent stylesheet
div {
    display: block;
}

<div class="vce-row-container">
<div class="vce-row vce-row--col-gap-30 vce-row-columns--top vce-row-content--top" id="el-ae93b178" data-vce-do-apply="all el-ae93b178">
<div class="vce-row-content" data-vce-element-content="true">
<div class="vce-col vce-col--md-50p vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-first vce-col--lg-first vce-col--xl-first" id="el-eacaebbd" data-vce-do-apply="background el-eacaebbd">
<div class="vce-col-inner" data-vce-element-content="true" data-vce-do-apply="padding margin  border el-eacaebbd">
<div class="vce-text-block">
<div class="vce-text-block-wrapper vce" id="el-21310b56" data-vce-do-apply="all el-21310b56">
<h2>Page Title</h2><p>Page Content</div></div></div></div>
<div class="vce-col vce-col--md-50p vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last" id="el-bf03877a" data-vce-do-apply="background el-bf03877a">
<div class="vce-col-inner" data-vce-element-content="true" data-vce-do-apply="padding margin  border el-bf03877a">
<div class="vce-single-image-container vce-single-image--align-left">
<div class="vce vce-single-image-wrapper" id="el-2393669a" data-vce-do-apply="all el-2393669a">
<figure>
<div class="vce-single-image-inner vce-single-image--border-rounded">
<img class="vce-single-image" src="image link"></div></figure></div></div>
<div class="vce-button--style-basic-container vce-button--style-basic-container--align-center">
<span class="vce-button--style-basic-wrapper vce" id="el-b473842a" data-vce-do-apply="margin el-b473842a">
<a class="vce-button--style-basic vce-button--style-basic--border-rounded vce-button--style-basic--size-medium vce-button--style-basic--color-557cbf--fff" href="Contact us link" title="" data-vce-do-apply="padding border background  el-b473842a">Contact us</a></span></div></div></div></div></div></div>

我是WordPress的新手，所以请原谅我的问题。我已经使用Visual Composer编辑了一个站点，它在桌面视图上看起来很棒，如附图所示。在移动视图中，它会移动文本下的图像，我希望图像位于移动视图上的文本上方，并保留桌面视图的当前布局。我查看了互联网，许多人建议使用推拉，但我不知道从哪里开始。感谢

Mobile View Desktop View

Answer 1

这种情况正在发生，因为浏览器从左到右读取您的屏幕，因此当压缩到较小的屏幕时，它会将内容从左侧放到顶部，因为这对于阅读您的页面的人来说是合乎逻辑的。

如果您提供了一些源代码，那么我们可以查看并帮助您解决此问题。

WordPress页面图像向下移动视图 - 更改顺序

1 个答案: