在移动设备上显示时在右上方显示内容块

问题描述：

我正在使用CKEditor插件创建以下引导窗口小部件。自从插件发布以来，我就没有这个CSS了。这是它的样子。在移动设备上显示时在右上方显示内容块

在桌面/大型监视器这正是我希望它看起来。在移动屏幕上，Content块显示在Image之上（正如大多数人所期望的那样）。但我想翻转这种行为。在移动设备上，我希望图片显示在文字上方。我应该对下面的HTML做些什么改变？

这里是HTML。

<div class="row two-col-left"> 
    <div class="col-md-9 col-main"> 
     <p><span style="font-size:24px">Some Text Goes here</span><br /> 
    </div> 

    <div class="col-md-3 col-sidebar"> 
     <p><img src="../ckfinder/userfiles/images/Jackie.jpg" style="display:block; height:220px; margin:auto; text-align:center; width:220px" /></p> 
    </div> 
</div>

尝试** style =“display：inline”** –

我会在哪添加它？ – codeNinja

标签有一个style属性，它当前被设置为** block ** –

答

在您的html更改顺序，以便.col-sidebar div是第一次，这将解决您的移动问题。

在你的CSS添加一个媒体查询来改变侧边栏上的浮动属性的权利。我在这里做了768px的更改，但是您可以调整它以适应您希望发生更改时的断点值。

@media(min-width:768px){ 
    .col-sidebar {float:right;} 
}

我不知道css的位置，因为它是由ckeditor插件提供的。我在哪里可以在上面的html中添加媒体查询 – codeNinja

在你的html添加并在其中包含上面的CSS。或者创建一个新的样式表，在你的html中引用它，并在样式表中添加CSS。 – partypete25

因为我使用ckeditor我只输入页眉和页脚之间的部分。所以不可能放置标签。有没有办法与html内联？我试过这个，但没有保留在桌面上右侧的图像。 'style =“@ media（min-width：768px）{.col-sidebar {float：right}}; display：block; height：220px; margin：auto; text-align：center; width：220px”' – codeNinja

在移动设备上显示时在右上方显示内容块

相关推荐