在移动设备上显示时，在右侧内容的正上方显示内容块

Question

我正在使用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>

Answer 1

在您的html中更改订单，以便.col-sidebar div成为第一个，这将解决您的移动问题。

在你的css中添加媒体查询以更改右侧边栏上的浮动属性。在这里，我已经在768px处进行了更改，但您可以根据断点值进行调整以适应您希望更改发生的时间。

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