我目前正在制作HTML版面的移动版本&我正在尝试更改移动版本的div的div顺序。以下是桌面版的设置(div的顺序):
以下是我尝试过的代码。上图中的div#4不低于& div#5没有出现。任何人都可以指出我在这里错过了什么&为什么代码不起作用? 你的帐户
<div id="logo" class="row">
<div class="col text-center" style="background-color:#0471AF; height:100px; display: flex; justify-content: center;">
LOGO
</div>
</div>
<!-- /.logo -->
<div id="order-text" class="row">
<div class="col text-center" style="min-height: 98px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:36px; color: #0471AF; font-weight:100; display: flex; justify-content: center;">
<span style="align-self: center;">Heading Text</span>
</div>
</div>
<!-- /.order-text -->
<div class="row">
<div id="left-side-text" class="col-md-8 col-sm-12" style=" line-height: 18px;">
<span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; line-height: 18px; font-weight:100;">
Dear XYZ,
</span>
<br>
<br>
<span style="font-family:Helvetica, Arial, sans-serif; font-size:17px; text-decoration: none; text-align:left; padding-bottom:20px;">Good news! Your order is confirmed.</span>
<br>
<br>
<span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
Some other text
</span>
</div>
<!-- /.left-side text -->
<div id="order-information" class="col-md-4 col-sm-12 order-2">
<div class="col" style="height: 43px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:16px; color: #333333; text-decoration: none; font-weight:700; background: #f2f2f2; padding: 10px; border: 1px solid #999999; border-bottom: none;">
Order Details
</div>
<div class="col" style="font-family:Helvetica, Arial, sans-serif; font-size:12px; color: #333333; padding: 10px; height: 73px; border: 1px solid #999999; border-top: none;">
<table>
<tr>
<td class="col-2 font-weight-bold" style="padding-bottom: 10px; padding-left: 0">Order Date:</td>
<td class="col-2" style="padding-bottom: 10px; padding-left: 0">03/06/2016</td>
</tr>
<tr>
<td class="col-2 font-weight-bold" style="padding: 0px;">Order #:</td>
<td class="col-2" style="padding-bottom: 10px; padding-left: 0">123456789</td>
</tr>
</table>
</div>
</div>
<!-- /.order-information -->
</div>
<div id="confirmation-email" class="row order-1">
<div class="col-md-11 col-sm-12" style="line-height: 18px; vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
<br>
<br>Text1
<br>
<br> Text
<br> Text
</div>
</div>
答案 0 :(得分:1)
我为您找到了解决方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body><div id="logo" class="row">
<div class="col text-center" style="background-color:#0471AF; height:100px; display: flex; justify-content: center;">
LOGO
</div>
</div>
<!-- /.logo -->
<div id="order-text" class="row">
<div class="col text-center" style="min-height: 98px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:36px; color: #0471AF; font-weight:100; display: flex; justify-content: center;">
<span style="align-self: center;">Heading Text</span>
</div>
</div>
<!-- /.order-text -->
<div class="row">
<div id="left-side-text" class=" col-md-8" style=" line-height: 18px;">
<span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; line-height: 18px; font-weight:100;">
Dear XYZ,
</span>
<br>
<br>
<span style="font-family:Helvetica, Arial, sans-serif; font-size:17px; text-decoration: none; text-align:left; padding-bottom:20px;">Good news! Your order is confirmed.</span>
<br>
<br>
<span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
Some other text
</span>
</div>
<!-- /.left-side text -->
<div id="order-information" class=" col-md-4 order-sm-6 order-md-3">
<div class="col" style="height: 43px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:16px; color: #333333; text-decoration: none; font-weight:700; background: #f2f2f2; padding: 10px; border: 1px solid #999999; border-bottom: none;">
Order Details
</div>
<div class="col" style="font-family:Helvetica, Arial, sans-serif; font-size:12px; color: #333333; padding: 10px; height: 73px; border: 1px solid #999999; border-top: none;">
<table>
<tr>
<td class="col-2 font-weight-bold" style="padding-bottom: 10px; padding-left: 0">Order Date:</td>
<td class="col-2" style="padding-bottom: 10px; padding-left: 0">03/06/2016</td>
</tr>
<tr>
<td class="col-2 font-weight-bold" style="padding: 0px;">Order #:</td>
<td class="col-2" style="padding-bottom: 10px; padding-left: 0">123456789</td>
</tr>
</table>
</div>
</div>
<!-- /.order-information -->
<div class="col-md-12 order-sm-3 order-md-6" style="line-height: 18px; vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
<br>
<br>Text1
<br>
<br> Text
<br> Text
</div>
</div></body>
</html>