文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在移动设备中向上移动Div，在桌面中向下移动Div

问如何在移动设备中向上移动Div，在桌面中向下移动Div
EN

Stack Overflow用户

提问于 2017-12-15 21:36:50

回答 2查看 39关注 0票数 0

在一个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>

jquery

html

css

回答 2

Stack Overflow用户

发布于 2017-12-15 21:44:53

请更改div的一些顺序，使price-det div首先，然后prod-det，然后价格-det。

将float right添加到price-det中，并删除mobile上的float right属性。

希望它能为你工作。如果你分享了这一部分的设计截图，那么我的答案会更准确。

谢谢

票数 0

Stack Overflow用户

发布于 2017-12-15 21:53:58

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

<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>

更新

在这里你可以只使用@media的手机订单:请检查这一点...

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

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47833500

复制

相似问题

问如何在移动设备中向上移动Div，在桌面中向下移动Div
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在移动设备中向上移动Div，在桌面中向下移动DivEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在移动设备中向上移动Div，在桌面中向下移动Div
EN