さまざまなサイズのテキストをブートストラップと垂直に整列する方法

Question

申し訳ありませんが、私はいくつかの解決策を試しましたが、私が望むように動作するものは見つけられませんでした。

<style> 
.col-height { 
    display: table-cell; 
    float: none; 
    height: 100%; 
</style> 

私はそれを得る：列に次のスタイルを追加することによりscreenshot

：

<div class="row"> 
    <div class="col-md-3"> 
    <h3> 
     Operating Systems: 
    </h3> 
    </div> 
    <div class="col-md-8"> 
    <ul> 
     <li>Windows</li> 
     <li>Linux</li> 
    </ul> 
    </div> 
</div> 

これは、次の私に与える：ここで

は私の現在のコードの例です上に沿って整列された各列のテキストで展開されたときに、私が望むものを表示します。

小さなサイズにリサイズすると、hereのように表示され、ハードウェアセクションと同じように表示されます。

ここに私の質問があります：ブートストラップを使って、両方のケースでどのようにしたいかを表示する方法がありますか、どちらかを選択する必要がありますか？

Answer 1

-X COL-XSするCOL-MD-Xを変更してみてください。 h3のマージンが垂直方向の位置合わせに影響を与えているので、調整したいかもしれません。またIMO、フレキシボックスが...しかし動作しないの試みのための

@media (min-width:768px) { 
    .flex { 
     display:flex; 
     align-items:center; 
    } 
    h3 { 
     margin-top:5px; 
    } 
} 

http://www.codeply.com/go/hR8GJDwdL1

Answer 2

は大きな幅を中心にスタイルを適用するメディアクエリを使用し