Android 控件使用相同或下一行样式

我希望标签和控件的行为如下所示：

• 如果屏幕宽度小于X，则标签和控件应位于不同的行中，控件应扩展为全宽
• 如果宽度大于（或等于）X，则标签和控件应位于同一行，控件应向右对齐。此外，文本和控件应垂直居中对齐：

我有以下代码（）：

HTML:

<div class="container">
    <div class="dispInlineLabel" >
        <label for="rb_geschlecht-2a">Geschlecht</label>
    </div>
    <div class="dispInline">
        <fieldset  data-role="controlgroup" data-type="horizontal">                     
            <input type="radio" name="rb_geschlecht" id="rb_geschlecht-2a" value="0">
            <label for="rb_geschlecht-2a">weiblich</label>
            <input type="radio" name="rb_geschlecht" id="rb_geschlecht-2b" value="1">
            <label for="rb_geschlecht-2b">männlich</label>
        </fieldset>
    </div>
    <div class="clearFloats"></div>

    <div class="dispInlineLabel" >
        <label for="ti_gebdat">Geburtsdatum</label>
    </div>
    <div class="dispInline">       
        <input name="ti_gebdat" id="ti_gebdat" style="text-align: right" type="date"  data-theme="d">
    </div>
    <div class="clearFloats"></div>                                     
</div>  

.dispInline, .dispInlineLabel{
    display: inline-block;
    border-bottom-width:0;
}
.dispInlineLabel{
    min-width: 120px;
}
.dispInline{
    float:right;
}
.clearFloats{
    clear:both;
}

这里，控件和标签与预期的不同或相同。 我的问题是：

• 当控件位于另一行时，它不会扩展到全宽
• 控件和标签位于同一行时不是“垂直对齐的中心”

---

有人能帮忙吗？

像这样使用媒体查询：

@media all and (max-width: 500px){
  .dispInline{
      width:100%;
    }
}

更新： 对于“垂直对齐”，需要将所有行设置为相同的高度，然后将标签的线条高度设置为高度：

CSS

.dispInlineLabel{
    min-width: 120px;
    height:55px;
}
.dispInlineLabel label{
    line-height:55px;
}
.dispInline{
    float:right;
    height:55px;
}

---

非常感谢，这解决了一部分问题。你知道如何垂直对齐控件和标签吗？