使圖像在移動設備上的文本下方，而不是上方

Question

我的文字右側有一張圖片。 這很好用。 當窗口大小大大減小時，文本會在我的圖像下方，而圖像則按預期位於其頂部。 但是，我想要的是將窗口調整為移動大小之類的大小時，將其更改為圖像位於文本下方而不是上方的位置。

這可能嗎？

這是我的代碼：

 .park-img { float: right; } .park-img img { display: inline-block; }

 <section class="tmt tmt-parking"> <a id="tmt-parking"></a> <div class="row"> <a name="parking"></a> <div class="park-img"> <img src="https://www.shsu.edu/academics/continuing-education/completion-ceremony/img/parking-map-1.jpg" style="height: 300px width: 300px"> </div> <div class="small-12 medium-6 columns large-6 columns"> <h2>Parking Information</h2> <p>The Sam Houston State University Parking Garage, located at 1730 Avenue I, is available 24 hours a day, seven days a week. Customers will pull an entry ticket at the entrance gates to enter. This entry ticket plus your credit card is needed to exit (Master Card, Visa, Discover, or American Express only). Your credit card will be charged based on the amount of time parked. <strong>CASH IS NOT ACCEPTED</strong>. Rates are $2.00/hour, with a $8.25/maximum fee per entry. Lost tickets will result in a $10.00 exit fee.</p> <p><strong>Do not park in spaces marked, “Reserved” between 7:30 am and 5:00 pm daily, as they are for semester contract holders only.</strong> </p> <p>Additional parking, at my charge, can be found in the following lots:</p> <ul> <li>33: Next to the Parking Garage (entrance/exit on Avenue I)</li> <li>35: At the corner of Avenue I and Bearkat Blvd (entrance/exit on Avenue I)</li> <li>36: Parallel parking along Avenue I</li> <li>56: In front of the George J. Beto Criminal Justice Center along 17th Street</li> </ul> </div> </div>

如果喜歡，這里是小提琴

Answer 1

您需要為此使用flexbox 模塊。 然后您就可以使用“order”屬性了。

 .flexbox { display: flex; flex-direction: column; } .item-first { order: 2; }

 <div class="flexbox"> <div class="item-first">I'm first, i guess?</div> <div class="item-second">I'm not first for sure</div> </div>

PS：注意，你不能把h2標簽放在p標簽中。

Answer 2

最簡單的方法是創建 2 個 img 標簽並使用 CSS 媒體查詢。 將第二張圖片放在文本下方並使其display:none 。 然后在您的 CSS 中指定屏幕尺寸：如果屏幕尺寸 < Npx ，則為您的第一張圖像display: none並使第二張圖像可見。 您最好設置一個新的寬度和高度以使其適合您的屏幕尺寸！ 只需使用 id 來區分圖像標簽並使您的 CSS 盡可能簡單。