Как изменить порядок отображения блоков в табличной верстке?
Нужно сверстать адаптивный имейл. Возникла проблема с отображением секции на мобильных устройства. Как сделать так, чтобы на мобильных устройствах блок с текстом отображался выше картинки?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>$ {MessageSubject}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap');
html {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}
a {
color: #1978CD;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0;
padding: 0;
}
@media (max-width:480px) {
.banner-title {
font-size: 34px;
line-height: 36px;
}
}
@media screen {
/* hides this rule from unsupported clients */
.webfont {
font-family: 'Nunito Sans', sans-serif !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff">
<tr>
<td align="center">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td style="padding-top:0; padding-bottom:0; padding-right:0; padding-left:0; margin:0px;">
<![endif]-->
<table align="center" cellspacing="0" cellpadding="0" border="0"
style="width:100%; max-width:600px; border:0;">
<tr>
<td>
<table bgcolor="#f6f6f6" width="100%" border="0" cellspacing="0" cellpadding="0"
style="background-color: #f6f6f6;">
<tr>
<td align="center"
style="padding-bottom: 25px; padding-top: 25px; padding-left: 25px; padding-right: 25px; color: #ffffff">
<div class="column"
style="width:100%;max-width:270px;display:inline-block;vertical-align:top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
>
<tr>
<td align="center" style="padding-bottom: 12px;"><img
src="https://i.ibb.co/ZXgjm7p/Rectangle-1.pngg"
alt="Picture"></td>
</tr>
</table>
</div>
<div class="column"
style="width:100%;max-width:270px;display:inline-block;vertical-align:top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
>
<tr>
<td class="webfont" style="font-family: Arial, sans-serif; font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 29px;
color: #222222;
">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td class="webfont" style="font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #222222;
">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- <tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" width="100%" ID="Table5" Border=0>
<tr>
<td>
<font face="verdana" size="1" color="#444444">This email was sent by:
<b>%%Member_Busname%%</b><br>%%Member_Addr%% %%Member_City%%,
%%Member_State%%, %%Member_PostalCode%%, %%Member_Country%%<br><br>
</font>
</td>
</tr>
<tr>
<td><a href="%%profile_center_url%%" alias="Update Profile">Update Profile</a></td>
</tr>
</table>
</td>
</tr> -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>Ответы (1 шт):
Автор решения: highpassion
→ Ссылка
Я добавил вашему элементу td идентификатор runner, но можно и присвоить класс, и прописал для свойства flex-контейнера для расположения его дочерних элементов.
Вам потребуется добавить правило для #runner в медиа-запросе.
Статья о медиа-запросах на MDN
О модуле CSS Flex вы можете почитать на:
UPD: для Gmail и Yahoo! Mail этот код не будет валиден
#runner {
display: flex;
flex-direction: column-reverse;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>$ {MessageSubject}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap');
html {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}
a {
color: #1978CD;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0;
padding: 0;
}
@media (max-width:480px) {
.banner-title {
font-size: 34px;
line-height: 36px;
}
}
@media screen {
/* hides this rule from unsupported clients */
.webfont {
font-family: 'Nunito Sans', sans-serif !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff">
<tr>
<td align="center">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td style="padding-top:0; padding-bottom:0; padding-right:0; padding-left:0; margin:0px;">
<![endif]-->
<table align="center" cellspacing="0" cellpadding="0" border="0"
style="width:100%; max-width:600px; border:0;">
<tr>
<td>
<table bgcolor="#f6f6f6" width="100%" border="0" cellspacing="0" cellpadding="0"
style="background-color: #f6f6f6;">
<tr>
<td id="runner" align="center"
style="padding-bottom: 25px; padding-top: 25px; padding-left: 25px; padding-right: 25px; color: #ffffff">
<div class="column"
style="width:100%;max-width:270px;display:inline-block;vertical-align:top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
>
<tr>
<td align="center" style="padding-bottom: 12px;"><img
src="https://i.ibb.co/ZXgjm7p/Rectangle-1.pngg"
alt="Picture"></td>
</tr>
</table>
</div>
<div class="column"
style="width:100%;max-width:270px;display:inline-block;vertical-align:top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
>
<tr>
<td class="webfont" style="font-family: Arial, sans-serif; font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 29px;
color: #222222;
">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td class="webfont" style="font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #222222;
">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- <tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" width="100%" ID="Table5" Border=0>
<tr>
<td>
<font face="verdana" size="1" color="#444444">This email was sent by:
<b>%%Member_Busname%%</b><br>%%Member_Addr%% %%Member_City%%,
%%Member_State%%, %%Member_PostalCode%%, %%Member_Country%%<br><br>
</font>
</td>
</tr>
<tr>
<td><a href="%%profile_center_url%%" alias="Update Profile">Update Profile</a></td>
</tr>
</table>
</td>
</tr> -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>