How To Clear Bootstrap 4 Floats with Media Queries

Question

I'm trying to set up 2 columns in Bootstrap 4 - one column will be an image and the other column a description. My image is portrait and so I need the image to float to the right in order to properly align with the description. This all works fine. However, I also need the columns to split into 2 rows on smaller devices. When this happens, my image is now still floated to the right and I would want it to be centered so it looks properly aligned.

How do I clear a Bootstrap 4 float when a certain breakpoint is hit?

Here is my HTML: `

<div class="products">
    <div class="container">
      <div class="row justify-content-center">
          <div class="col-lg-4 leftimage">
              <img class="img-fluid deviceImage penguinPop float-right" src="img/penguinPop.png" alt="Penguin Pop">
          </div>

        <div class="col-lg-8 appinfo" style="margin-top:6em">
            <h2>Penguin Pop</h2>
            <p>Penguin Pop is a fun and challenging arcade game! Dapper Dan returns in another entertaining physics based game. Don't let Dan hit the ground or it's game over. Keep him safely in the air by tapping under him, but watch out! Those bubbles that are rising are dangerous! If they float all the way to the top of the screen you lose one of three lives. Tap them before they reach the top to get extra points! Earn stars by playing the game and spending them in the in-game store! The store includes several different penguins to play with.  </p>
        </div>
      </div>
    </div>
  </div>

`

Answer 1

Assuming that you want to put them on top of each other

try this

First add a new class for example like i did mediaQuery

<img class="img-fluid deviceImage penguinPop float-right mediaQuery" src="img/penguinPop.png" alt="Penguin Pop">

I did the style and the css in a separate file because it's really annoying to put it inside the html

@media only screen and (max-width: 600px) {
    .mediaQuery {
        margin-right: 50%;
    }
}

Try it in a css file because personally it didn't work with me as a css attribute.... and of course you know that you've to link the css file first