I'm trying to show three columns on desktop and one column on mobile. How can I do this? The div has to be responsive. Thanks!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-2 col-sm col-sm-offset-0 col-xs-1">
<img src="https://via.placeholder.com/100" />
<p>Test</p>
</div>
<div class="col-md-4 col-md-offset-2 col-sm col-sm-offset-0 0 col-xs-1">
<img src="https://via.placeholder.com/100" />
<p>Test</p>
</div>
<div class="col-md-4 col-sm col-xs-1">
<img src="https://via.placeholder.com/100" />
<p>Test</p>
</div>
</div>
</div>I'm not sure what you're trying to do with all the offset and other classes, but this is about as simple a situation as they come. You want full-width columns (not one column, but three stacked columns) on mobile and 1/3 (4/12) width columns above some breakpoint.
The col-12 class takes 12 of 12 width units starting at the smallest screen sizes, and col-lg-4 takes 4 of 12 width units starting at 992px. Per Bootstrap's "mobile first" convention, classes should be listed smallest to largest.
https://getbootstrap.com/docs/4.6/layout/grid/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-lg-4">
<img src="https://via.placeholder.com/100" />
<p>Test</p>
</div>
<div class="col-12 col-lg-4">
<img src="https://via.placeholder.com/100" />
<p>Test</p>
</div>
<div class="col-12 col-lg-4">
<img src="https://via.placeholder.com/100" />
<p>Test</p>
</div>
</div>
</div>