Responsive table-like design - html

Question

In a form four properties have to be set by the user. I chose a table like layout:
This layout, however, makes problems on smaller screens. In this case, I would like to have:
and on very small screens:
Any idea? I am using HTML5, CSS3, jQuery 3.3.1 and bootstrap 2.

Answer 1

If I understand it right, you intend use table to make your form stay in a good layout.
it's not recommended this way because you can't rearrange the cell in a table freely. Or should I say, don't use table to make a responsive layout.
Bootstrap grid system is responsive by default so you should make use of it.
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
In your case, you can put your element in four div tag like this
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your first element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your second element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your third element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your fourth element -->
</div>
</div>
</div>

Answer 2

I solved my problem with flexbox:
Here my CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-container > div {
margin: 1px;
}
.flex-container > .label {
padding-left: 8px;
width: 20%;
min-width: 100px;
}
.flex-container > .value {
vertical-align: middle;
}
.line-break {
width: 100%;
}
.cond-line-break {
width: 100%;
display: none;
}
#media screen and (max-width: 720px) {
.cond-line-break {
display: inline;
}
}
#media screen and (max-width: 360px) {
.cond-line-break {
display: inline;
}
.flex-container > .label {
width: 100%;
}
}
and my HTML:
<div class="flex-container">
<div class="label">Property 1:</div>
<div class="value">
<select>
<option selected="selected">Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="cond-line-break"></div>
<div class="label">Enter Property 2 here:</div>
<div class="value">
<select>
<option>Value 1</option>
<option selected="selected">Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="line-break"></div>
<div class="label">Property 3:</div>
<div class="value">
<select>
<option>Value 1</option>
<option>Value 2</option>
<option selected="selected">Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="cond-line-break"></div>
<div class="label">Property 4:</div>
<div class="value">
<select>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option selected="selected">Value 4</option>
</select>
</div>
</div>
It works as intended, even with labels of different length.