响应式布局 - 在小屏幕上将图片放在文本上方

我的网站上有这种响应式布局。当屏幕宽度小于767像素时，图像将隐藏在文本下方。有没有办法让图像（和标题，即.rightColumn）改为在.leftColumn之上？要做到这一点响应式布局 - 在小屏幕上将图片放在文本上方

*, *:before, *:after { 
 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
 
} 
 

 
body { margin: 0; } 
 

 
.columnsContainer { position: relative; margin: 1.5em 0; padding:1.5em ; border: 1px solid #fff;} 
 

 
.leftColumn { margin-bottom: .5em; } 
 

 
.rightColumn .wp-caption{border-width: 0px;} 
 

 
.rightColumn {min-height:100%;} 
 

 
/* MEDIA QUERIES */ 
 
@media screen and (min-width: 767px) { 
 
    .leftColumn { margin-right: 51%; } 
 

 
\t .rightColumn { position: absolute; top: 0; right: 0; width: 48.5%; } 
 
}

<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 

 
    <title>Responsive Two Column Layout (Left Column Fluid)</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    </head> 
 
    
 
    <body> 
 
<div class="columnsContainer"> 
 
<div class="leftColumn"> 
 
<h2 style="width: 100%; font-family: Aller;"></h2> 
 
<h2 style="width: 100%; font-family: Aller;">BEST OF SCOTLAND 
 
FISHING BREAK</h2> 
 
<ul class="checkmark"> 
 
\t <li>2 Days each of guided salmon, pike &amp; trout/grayling fishing</li> 
 
\t <li>7 Night bed &amp; breakfast</li> 
 
\t <li>Full equipment &amp; transfers provided</li> 
 
\t <li>Peak season 1st April - 15th November</li> 
 
\t <li>Glasgow or Edinburgh airport transfers Included</li> 
 
\t <li><span style="font-family: Aller;">1 hour from Edinburgh, Glasgow &amp; Perth</span></li> 
 
</ul> 
 
<a href="http://scotiafishing.com/wp-content/uploads/Best-Of-Scotland-Package.pdf" rel="">View Trip Dossier</a> 
 

 
</div> 
 
<div class="rightColumn"> 
 
<p style="text-align: right;"> 
 

 
<img class="aligncenter wp-image-4684" src="http://scotiafishing.com/wp-content/uploads/bofs.jpg" alt="best-of-scotland-break" width="415" height="277" />  
 
    <br>Experience the best of Scotland's fishing with this six day break! 
 

 
</p> 
 

 
</div> 
 
</div> 
 

 
    </body> 
 
</html>

来源

2016-01-20 Peter Kirkwood

最简单的方法是leftColumn DIV之前添加rightColumn股利。它不应该混乱的结构，并会首先显示图像

<div class="rightColumn"> 
<p style="text-align: right;"> 

<img class="aligncenter wp-image-4684" src="http://scotiafishing.com/wp-content/uploads/bofs.jpg" alt="best-of-scotland-break" width="415" height="277" /> 
    <br>Experience the best of Scotland's fishing with this six day break! 

</p> 

</div> 
<div class="leftColumn"> 
<h2 style="width: 100%; font-family: Aller;"></h2> 
<h2 style="width: 100%; font-family: Aller;">BEST OF SCOTLAND 
FISHING BREAK</h2> 
<ul class="checkmark"> 
    <li>2 Days each of guided salmon, pike &amp; trout/grayling fishing</li> 
    <li>7 Night bed &amp; breakfast</li> 
    <li>Full equipment &amp; transfers provided</li> 
    <li>Peak season 1st April - 15th November</li> 
    <li>Glasgow or Edinburgh airport transfers Included</li> 
    <li><span style="font-family: Aller;">1 hour from Edinburgh, Glasgow &amp; Perth</span></li> 
</ul> 
<a href="http://scotiafishing.com/wp-content/uploads/Best-Of-Scotland-Package.pdf" rel="">View Trip Dossier</a> 

</div>

来源

2016-01-20 14:24:55 Sphinx

哇 - 这很容易！非常感谢 –

响应式布局 - 在小屏幕上将图片放在文本上方

回答

相关问题