0
我的網站上有這種響應式佈局。當屏幕寬度小於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 & trout/grayling fishing</li>
\t <li>7 Night bed & breakfast</li>
\t <li>Full equipment & 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 & 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>
哇 - 這很容易!非常感謝 –