Responsive design for elements - css

Question

How can I make an element with class properties display as inline-block for laptops and desktops and a list for tablets and mobiles?
Whenever I shrink the width of my browser, iPad design elements do not fit properly.
.properties {
display: inline-block;
}
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
.properties {
display: inline-block;
}
.propertyButton {
display: inline-block;
}
}
#media (max-width: 900px) {
.properties {
display: list-item;
list-style-type: none;
}
.propertyButton {
margin-top: -2%;
margin-left: 30%;
}
}
<div class="propertyWrapper" style="width:100%;">
<div style="float:right">
<span ng-click="addProperty()" class="button buttonPrimary pull-right">Add Property</span>
</div>
<div class="properties">
<label>Name</label>
<input type="text" />
</div>
<div class="properties">
<label>Name</label>
<input type="text" />
</div>
<div class="properties">
<label>Name</label>
<input type="text" />
</div>
<div class="properties">
<label>
IsRequired(TE):
</label>
<input type="checkbox" ng-model="property.TradeEarthRequired" name="UsedEquipmentPropertyList[0].TradeEarthRequired" class="ng-pristine ng-valid">
</div>
<div class="propertyButton">
<span class="button primaryAction" ng-click="addProperty()">Add</span>
<span class="button primaryAction" ng-click="removeProperty(property,$index)">Delete</span>
</div>
</div>

Answer 1

Sometimes, you just need to duplicate the code.
Keep an inline-block view for windows sized over 1200.
When you are under 1200, just hide it and show a fresh new list ?

Answer 2

I think you've just got your CSS a bit wrong - the media queries shouldn't be nested like that, as far as I can tell. Is this JSFiddle more like what you wanted?
.properties {
display: inline-block;
}
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
.properties {
display: inline-block;
}
.propertyButton {
display: inline-block;
}
}
#media screen and (max-width: 900px) {
.properties {
display: list-item;
list-style-type: none;
}
.propertyButton {
margin-top:-2%;
margin-left: 30%;
}
}