I'm trying to lay out some buttons so that they're horizontal at full width and vertical on phones, using the Bulma CSS framework. At the end of this post, there's some toy code that demonstrates the problem.
The problem is that the code below works properly on full width devices, but on phone-sized widths, the row of buttons at the bottom is not responsive.
On the other hand, if I change <div class="field is-grouped"> in the below to <div class="field">, then the buttons lay out correctly on mobile (i.e., the buttons are vertical), but the buttons do not lay out correctly on full-width devices: they're still vertical there.
How do I fix this so that the buttons are horizontal on full-width and vertical on mobile? Apart, that is, from just manually doing it with flexbox or something. Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim tortor. Tempor orci eu lobortis elementum nibh tellus molestie. Eget mi proin sed libero enim sed. Congue nisi vitae suscipit tellus mauris a diam maecenas sed. Laoreet suspendisse interdum consectetur libero. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Nec ullamcorper sit amet risus nullam eget felis eget. Eros in cursus turpis massa tincidunt dui ut. Faucibus a pellentesque sit amet porttitor eget dolor. Nisl rhoncus mattis rhoncus urna neque viverra. Urna et pharetra pharetra massa massa ultricies mi.
</p>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="field is-grouped">
<p class="control">
<a class="button is-link" href="https://google.com">
Blah blah button 1
</a>
</p>
<p class="control">
<a class="button is-link" href="https://google.com">
Blah Blah button 2
</a>
</p>
<p class="control">
<button class="button is-link" href="https://google.com">
Blah blah button 3
</button>
</p>
</div>
</div>
</section>
</body>