Reputation: 2110
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>
Upvotes: 0
Views: 215
Reputation: 13008
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>
Upvotes: 1