在右栏中显示信息

Question

目标：
使组件的名称位于左侧（第一列）和右侧（第二列），您应该具有与浏览器的解决方案981px相关的不同对象，如输入文本框等。结果位于此链接“{{ 1}}”。

问题：
当我添加“@@ media screen and（min-width：981px）{”（https://jsfiddle.net/2w9kskr2/）的解决方案时，结果与目标描述（https://jsfiddle.net/jdvdpwwj/）不同。

的信息：
我正在使用bootstrap v2

https://jsfiddle.net/2w9kskr2/

    .div-table{
      display:table;         
      width:auto;         

      border-spacing:5px;/*cellspacing:poor IE support for  this*/
    }
    .div-table-row{
      display:table-row;
      width:auto;
      clear:both;
    }
    .div-table-col{
      float:left;/*fix for  buggy browsers*/
      display:table-column;         
      width:150px;         
    }

    .div-table-col2{
      float:left;/*fix for  buggy browsers*/
      display:table-column;         
      width:415px;         
    }


    #A, #Text, #From, #T {
            width: 421px;         
    }

Answer 1

你在这里得到的答案是https://jsfiddle.net/thwnvo29/

.div-table-row{
      display:block;
      width:100%;
      float:left;
    }
    .div-table-col{
      float:left;
      display:block;      
      width:20%;         
    }
    .div-table-col2{
      float:left;
      display:block;         
      width:80%;         
    }
    .div-table-col2 input,.div-table-col2 button,.div-table-col2 textarea {
      width:100% !important;
    }