Blockquote I'm trying to stack these picture vertically on a small screen.so one column instead of two
I'm trying to stack these picture vertically on a small screen.so one column instead of two
here is my code`
<div >
<div >
<div >
<div >
<img
src="project-images/skylit.jpg"
alt=""
/>
<div >
<a href="#">link here</a>
</div>
</div>
</div>
<div >
<div >
<img
src="project-images/skit4.jpg"
alt=""
/>
<div >
<a href="#">link here</a>
</div>
</div>
</div>
<div ></div>
<div >
<div >
<img
src="project-images/skit6.jpg"
alt=""
/>
<div >
<a href="#">link here</a>
</div>
</div>
</div>
<div >
<div >
<img
src="project-images/skylit2.jpg"
alt=""
/>
<div >
<a href="#">link here</a>
</div>
</div>
</div>
<div >
<div >
<img
src="project-images/lvr.jpg"
alt=""
/>
<div >
<a href="#">link here</a>
</div>
</div>
</div>
<div >
<div >
<img
src="project-images/gym.jpg"
alt=""
/>
<div >
<a href="#">link here</a>
</div>
</div>
</div>
</div>
</div>`
I'm trying to stack these picture vertically on a small screen.so one column instead of two here is what I have tried so far
CodePudding user response:
If using bootstrap the classes should be col-sm-12, I see you are using sm-col-12 and col-ms-12. That should make the element take all space in grid.
https://getbootstrap.com/docs/4.0/layout/grid/
Start from smallest class too: