html - Bootstrap - 2 columns - make image full width on narrow screens

Question

Using the simple HTML below, images which are 640 pixels square appear in the left column, and other content appears in the right hand column.

Is there a way I can control the responsive nature of the HTML / CSS so that when the screen width is < 375 pixels, instead of the image getting smaller and smaller in the left hand column, the non-image content drops below the image and the image takes up the full width of the view screen?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container-fluid">

    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/640" class="img-fluid">
        </div>
        <div class="col">
            <h2>Section 1</h2>
            <p>Something happened and something else happened and then it was the end.</p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/640" class="img-fluid">
        </div>
        <div class="col">
            <h2>Section 2</h2>
            <p>Nothing happens without blue cheese sandwiches being served first.</p>
        </div>
    </div>

</div>

question from:https://stackoverflow.com/questions/65833276/bootstrap-2-columns-make-image-full-width-on-narrow-screens

Answer 1

Simply add a media query css enty like in the snippet below. That overwrites the bootstrap grid and replace it with a single columns grid if the screen size is 375px or smaller.

Highly recomemnd 480px as it is the highest portraite smartphone width.

@media only screen 
  and (max-width: 375px) {
    .container-fluid .row {
      display: grid;
      grid-template-columns: 1fr;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container-fluid">

    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/640" class="img-fluid">
        </div>
        <div class="col">
            <h2>Section 1</h2>
            <p>Something happened and something else happened and then it was the end.</p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/640" class="img-fluid">
        </div>
        <div class="col">
            <h2>Section 2</h2>
            <p>Nothing happens without blue cheese sandwiches being served first.</p>
        </div>
    </div>

</div>