在移動設備上顯示時在右上方顯示內容塊

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

來源

2016-03-02 codeNinja

嘗試** style =「display：inline」** –

我會在哪添加它？ – codeNinja

標籤有一個style屬性，它當前被設置爲** block ** –

在您的html更改順序，以便.col-sidebar div是第一次，這將解決您的移動問題。

在你的CSS添加一個媒體查詢來改變側邊欄上的浮動屬性的權利。我在這裏做了768px的更改，但是您可以調整它以適應您希望發生更改時的斷點值。

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

來源

2016-03-02 04:56:26 partypete25

我不知道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

在移動設備上顯示時在右上方顯示內容塊

回答

相關問題