I've got a pretty basic question here but can't seem to find a straightforward answer. I'm using Bootstrap to style a website and struggling with making it mobile-responsive.
Following the given answer, I used this code to show a button next to a select box:
<div class="input-group">
<select class="form-control mb-3" aria-label="Default select example" id="selection-object" name="selection-object" onchange="changeText(this);">
<option value="Select an element</option>
{% for element in elements %}
<option value='{{ element .content }}'>{{ element |string }}</option>
{% endfor %}
</select>
<div class="input-group-addon input-group-button">
<button type="submit" id="modify_btn" class="btn btn-primary">Modify</button>
</div>
</div>However, my issue lies in also using :
<div class="container mt-4">
<div class="row">to divide my page into two columns.
The problem arises when I reduce the screen size as the columns lose their responsiveness, appearing like this:
https://i.sstatic.net/QqZnO.png
Is there a way to make the columns responsive, where the right column shifts below the left one on a smaller screen?
Thank you in advance!