CODEWITHSUNDEEP
htmlcssresponsiveness
Jaken
Jaken

Reputation: 1343

Make image go below text on mobile, not above

I have an image that is to the right of my text. That's working great. When the window size is decreased greatly, the text goes below my image, and the image is on top of it as expected. What I would like, however, is to change that to where the image goes below the text rather than above it when the window is resized to something like a mobile size.

Is this possible?

Here is my code:

.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 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>

Here is fiddle if preferred

Upvotes: 2

Views: 4406

Answers (2)

EmmanuelBeziat
EmmanuelBeziat

Reputation: 734

You need to use flexbox module for this. You'll then be able to use the "order" property.

.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: Watch out, you can't put h2 tag in p tag.

Upvotes: 3

Lio_69
Lio_69

Reputation: 110

The easiest way is to create 2 img tags and use CSS media queries. Put the second image under your text and make it display:none. Then specify a screen size in your CSS: if screen size < Npx , display: none for your first image and make the second image visible. You better set a new width and height to make it fit with your screen size! Just use ids to differentiate the image tags and make your CSS as simple as possible.

Upvotes: 0

Related Questions