使图像在移动设备上位于文字下方，而不是上方

Question

我的文字右侧有一张图片。效果很好。当 window 大小大大减小时，文本位于我的图像下方，而图像按预期位于其上方。然而，我想要的是在将 window 调整为移动尺寸时将其更改为图像位于文本下方而不是上方的位置。

这可能吗？

这是我的代码：

.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 .00/hour, with a .25/maximum fee per entry. Lost tickets will result
        in a .00 exit fee.</p>
      <p><strong>Do not park in spaces marked, “Reserved” between 7:30 a.m. and 5:00 p.m. 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>

这里是fiddle如果喜欢

Answer 1

最简单的方法是创建 2 个 img 标签并使用 CSS 媒体查询。将第二张图片放在您的文字下方并设为 display:none。然后在 CSS 中指定屏幕尺寸：如果屏幕尺寸 < Npx ，第一张图片 display: none 并使第二张图片可见。您最好设置一个新的宽度和高度以使其适合您的屏幕尺寸！只需使用 id 来区分图像标签，并使您的 CSS 尽可能简单。

Answer 2

您需要为此使用 flexbox module。然后您就可以使用 "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标签里。

使图像在移动设备上位于文字下方，而不是上方

Make image go below text on mobile, not above

html

css

responsiveness