How to make elements stack in mobile view? - html

Question

I have a small image, a form entry field, and a submit button. They are displaying as I want, side by side horizontally on a site on a normal desktop computer.
When the page is viewed on a small screen, the submit button is dropping down to the line below (good), but the image is staying where its at right next to the text entry field. Ideally, I'd like to force the three elements to stack on top of each other in mobile view. So, the top would be the image (centered), then the text entry field, then the submit button.
I have only a very basic understanding of responsive design. Any tips?
Here is the code that represents my situation:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: 100%;
}
.flex-item {
padding: 0;
margin: 0;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item"><img src="https://images.unsplash.com/photo-1509718752889-8c69d2c6c11d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=1253b775db4261c2618d0b901b115b38" height="65" width="150"></span>
</div>
<div class="row">
<span class="flex-item">
<form action="find.php" method="post">
<input type="text" name="thingy_id" placeholder="Enter Thingy ID" size="13" maxlength="15">
<input type="submit" value="SUBMIT" class="thingyid" />
</form>
</span>
</div>
</div>

Answer 1

#media (max-width: 1024px) {
.flex-container {
display: block;
}
}

Answer 2

Here is a way of doing this with CSS Grid Layout.
It is pretty heavy on the CSS side, but it allows for incredibly minimal HTML.
You basically just set it up so that it will all display in one column, but if the screen is wide enough, you can make it side by side. You could do it the other way around, setting it up to display side by side, but if the screen is too narrow, you make it one column.
body {
display: grid;
grid-gap: 1em;
}
img {
justify-self: center;
}
form {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
input {
margin: 5px;
}
input[type="text"] {
grid-column: 2;
align-self: center;
}
input[type="submit"] {
grid-column: 2;
align-self: center;
}
#media (min-width: 800px) {
body {
grid-template-columns: 1fr auto auto 1fr;
}
img {
grid-column: 2;
}
form {
grid-column: 3;
grid-template-columns: 1fr auto auto 1fr;
}
input[type="text"] {
grid-column: 2;
}
input[type="submit"] {
grid-column: 3;
}
}
<img src="https://images.unsplash.com/photo-1509718752889-8c69d2c6c11d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=1253b775db4261c2618d0b901b115b38" height="65" width="150" />
<form action="find.php" method="post">
<input type="text" name="thingy_id" placeholder="Enter Thingy ID" size="13" maxlength="15">
<input type="submit" value="SUBMIT" class="thingyid" />
</form>
I just really wanted to do this in Grid. You don't have to do it, but it is a way, and I feel like more people should be aware of it.

Answer 3

You could use the extra Bootstrap class shown below to make an element's column take up a whole row on mobile devices. You could then use CSS to adjust the width and size of the elements.
<div class="flex-container">
<div class="row">
<div class="col-xs-12"> // setting the column to 12 makes the
element take up row entire row pushing the neighbouring
elements to move under it
<span class="flex-item"><img
src="https://images.unsplash.com/photo-1509718752889-
8c69d2c6c11d?ixlib=rb-
0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJ
hcHBfaWQiOjE0NTg5fQ%3D%3D&s=1253b775db4261c2618d0
b901b115b38" height="65" width="150">
</span>
</div>
</div>
<div class="row">
<span class="flex-item">
<form action="find.php" method="post">
<div class="col-xs-12"> // Use here
<input type="text" name="thingy_id" placeh
older="Enter Thingy ID" size="13" maxlength="15">
</div>
<div class="col-xs-12"> // Use here
<input type="submit" value="SUBMIT" class="thingyid" />
</div>
</form>
</span>
</div>
</div>