Question

mai div中有3个div。对于桌面，div需要显示为prod-det，Color-det和price-det，但是，在移动设备中，div应该是Price-det，Prod-det然后是Color-det。

请帮我解决这个问题。

<div class="row prod-detail-list">
   <div class="col-md-5 prod-det">
      <h3 class="product-details">Product Details</h3>
      <h5 class="attr">
         <label>Material Type</label> <span class="proVariant">PVC</span>
      </h5>
      <h5 class="attr">
         <label>Color</label><span class="proVariant">C100079</span>  
      </h5>
      <h5 class="attr">
         <label>Gloss Level</label><span class="proVariant">9-14</span> 
      </h5>
      <h5 class="attr">
         <label>Coil</label><span class="proVariant">300 FT PER COIL</span>
      </h5>
      <h5 class="attr">
         <label>Box</label><span class="proVariant">2 COIL PER BOX</span>
      </h5>
      <h5 class="attr">
         <label>Palette</label><span class="proVariant">10 BOX PER PALLET</span>   
      </h5>
      <h5 class="attr">
         <label>Size</label><span class="proVariant">1-3/8 X 3MM</span>
      </h5>
      <h5 class="attr">
         <label>Embossing</label><span class="proVariant">20</span> 
      </h5>
   </div>
   <div class="col-md-7 color-det">
      <h3 class="product-details">Color Details</h3>
      <h5 class="attr">
         <label>Color Type</label><span class="proVariant">Solid Colors</span>
      </h5>
   </div>
   <div class="col-md-7 price-det">
      <label>Product1</label>
      <input type="number" />
      <span class="price-amt"></span>
   </div>
</div>

Answer 1

请更改div的一些订单make price-det div然后prod-det然后price-det。

将float右移添加到price-det并移除mobile右侧的属性。

希望这对你有用。如果您分享本节的设计屏幕截图，那么我的答案会更准确。

由于

Answer 2

我在这里使用visible-xs和hidden-xs div在移动设备上发布此订单。

＆＃13;

<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<div class="row prod-detail-list">
   <div class="col-xs-12 visible-xs">
      <label>Product1</label>
      <input type="number" />
      <span class="price-amt"></span>
   </div>
   <div class="col-xs-12 col-md-5 prod-det">
      <h3 class="product-details">Product Details</h3>
      <h5 class="attr">
         <label>Material Type</label> <span class="proVariant">PVC</span>
      </h5>
      <h5 class="attr">
         <label>Color</label><span class="proVariant">C100079</span>  
      </h5>
      <h5 class="attr">
         <label>Gloss Level</label><span class="proVariant">9-14</span> 
      </h5>
      <h5 class="attr">
         <label>Coil</label><span class="proVariant">300 FT PER COIL</span>
      </h5>
      <h5 class="attr">
         <label>Box</label><span class="proVariant">2 COIL PER BOX</span>
      </h5>
      <h5 class="attr">
         <label>Palette</label><span class="proVariant">10 BOX PER PALLET</span>   
      </h5>
      <h5 class="attr">
         <label>Size</label><span class="proVariant">1-3/8 X 3MM</span>
      </h5>
      <h5 class="attr">
         <label>Embossing</label><span class="proVariant">20</span> 
      </h5>
   </div>
   <div class="col-xs-12 col-md-7 color-det">
      <h3 class="product-details">Color Details</h3>
      <h5 class="attr">
         <label>Color Type</label><span class="proVariant">Solid Colors</span>
      </h5>
   </div>
   <div class="hidden-xs col-md-7 price-det">
      <label>Product1</label>
      <input type="number" />
      <span class="price-amt"></span>
   </div>
</div>

＆＃13;

<强>更新

此处您只需@media即可使用移动订单：请检查一下......

＆＃13;

@media (max-width: 480px) {
.prod-detail-list {
position: relative;
padding-top: 28px;
}
.price-det {
position: absolute;
top: 0;
}
}

＆＃13;

<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<div class="row prod-detail-list">
   <div class="col-xs-12 col-md-5 prod-det">
      <h3 class="product-details">Product Details</h3>
      <h5 class="attr">
         <label>Material Type</label> <span class="proVariant">PVC</span>
      </h5>
      <h5 class="attr">
         <label>Color</label><span class="proVariant">C100079</span>  
      </h5>
      <h5 class="attr">
         <label>Gloss Level</label><span class="proVariant">9-14</span> 
      </h5>
      <h5 class="attr">
         <label>Coil</label><span class="proVariant">300 FT PER COIL</span>
      </h5>
      <h5 class="attr">
         <label>Box</label><span class="proVariant">2 COIL PER BOX</span>
      </h5>
      <h5 class="attr">
         <label>Palette</label><span class="proVariant">10 BOX PER PALLET</span>   
      </h5>
      <h5 class="attr">
         <label>Size</label><span class="proVariant">1-3/8 X 3MM</span>
      </h5>
      <h5 class="attr">
         <label>Embossing</label><span class="proVariant">20</span> 
      </h5>
   </div>
   <div class="col-xs-12 col-md-7 color-det">
      <h3 class="product-details">Color Details</h3>
      <h5 class="attr">
         <label>Color Type</label><span class="proVariant">Solid Colors</span>
      </h5>
   </div>
   <div class="col-xs-12 col-md-7 price-det">
      <label>Product1</label>
      <input type="number" />
      <span class="price-amt"></span>
   </div>
</div>

＆＃13;

如何在桌面

2 个答案: