I need help with positioning buttons at the bottom of three columns of text. I want them to be aligned vertically on the page when the columns are side-by-side, and then placed after each column when viewed in a single-column layout on small screens. The columns don't have backgrounds, so equal length is not mandatory.
Here is the code for the section:
<div 1 - position:relative>
<div 2 - display:block;overflow:hidden>
<div 3 - position:relative; float:left>
<div 4 - display:block>
<img src="image1.jpg" />
<h1>Title 1</h1>
<p> Column 1 text</p>
</div 4>
</div 3>
<div 3 - position:relative; float:left>
<div 4 - display:block>
<img src="image2.jpg" />
<h1>Title 2</h1>
<p> Column 1 text</p>
</div 4>
</div 3>
<div 3 - position:relative; float:left>
<div 4 - display:block>
<img src="image3.jpg" />
<h1>Title 3</h1>
<p> Column 1 text</p>
</div 4>
</div 3>
</div 2>
</div 1>
I've experimented with different codes and placements, but haven't found a working solution yet. Existing solutions seem outdated or unclear to me. Positioning the buttons in a separate div after the columns works well on larger screens, but not on smaller ones where they all stack at the end. Placing them at the beginning or end of the columns results in vertical misalignment based on text length.
I attempted using "position:absolute;bottom:0" for div 2 with unsatisfactory outcomes. Any suggestions or solutions would be greatly appreciated.