[{"data":1,"prerenderedAt":1237},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/examples/reverse-stack":270,"docs-bottom-nav":1164},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":192,"body":272,"description":1156,"extension":1157,"meta":1158,"navigation":1159,"path":193,"seo":1160,"sitemap":1161,"stem":1162,"__hash__":1163},"docs/docs/examples/reverse-stack.md",{"type":273,"value":274,"toc":1152},"minimark",[275,279,283,288,291,520,523,526,769,772,790,801,805,808,1112,1115,1141,1148],[276,277,192],"h1",{"id":278},"reverse-stack",[280,281,282],"p",{},"With responsive HTML emails, you sometimes need to reverse the order in which stacked columns appear on mobile. You might even want to set a custom stacking order for layouts with 3+ columns.",[284,285,287],"h2",{"id":286},"reverse-2-col","Reverse 2 col",[280,289,290],{},"Imagine a two column layout, with text on the left and an image on the right:",[292,293,299],"pre",{"className":294,"code":295,"filename":296,"language":297,"meta":298,"style":298},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Ctable class=\"w-full\">\n  \u003Ctr>\n    \u003Cth class=\"sm:block w-1/2 sm:w-full font-sans font-normal text-left\">\n      \u003Cp class=\"text-2xl font-hairline text-black\">Left text\u003C/p>\n      \u003Cp class=\"text-slate-700\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aspernatur.\u003C/p>\n    \u003C/th>\n    \u003Cth class=\"sm:block w-1/2 sm:w-full font-normal text-left\">\n      \u003Cimg src=\"https://picsum.photos/600/600\" alt=\"Unsplash photo\">\n    \u003C/th>\n  \u003C/tr>\n\u003C/table>\n","2-col.html","html","",[300,301,302,334,345,367,399,428,438,458,492,501,511],"code",{"__ignoreMap":298},[303,304,307,311,315,319,322,325,329,331],"span",{"class":305,"line":306},"line",1,[303,308,310],{"class":309},"soJEP","\u003C",[303,312,314],{"class":313},"sizJ4","table",[303,316,318],{"class":317},"sQMLp"," class",[303,320,321],{"class":309},"=",[303,323,324],{"class":317},"\"",[303,326,328],{"class":327},"sfCc6","w-full",[303,330,324],{"class":317},[303,332,333],{"class":309},">\n",[303,335,337,340,343],{"class":305,"line":336},2,[303,338,339],{"class":309},"  \u003C",[303,341,342],{"class":313},"tr",[303,344,333],{"class":309},[303,346,348,351,354,356,358,360,363,365],{"class":305,"line":347},3,[303,349,350],{"class":309},"    \u003C",[303,352,353],{"class":313},"th",[303,355,318],{"class":317},[303,357,321],{"class":309},[303,359,324],{"class":317},[303,361,362],{"class":327},"sm:block w-1/2 sm:w-full font-sans font-normal text-left",[303,364,324],{"class":317},[303,366,333],{"class":309},[303,368,370,373,375,377,379,381,384,386,389,392,395,397],{"class":305,"line":369},4,[303,371,372],{"class":309},"      \u003C",[303,374,280],{"class":313},[303,376,318],{"class":317},[303,378,321],{"class":309},[303,380,324],{"class":317},[303,382,383],{"class":327},"text-2xl font-hairline text-black",[303,385,324],{"class":317},[303,387,388],{"class":309},">",[303,390,391],{"class":327},"Left text",[303,393,394],{"class":309},"\u003C/",[303,396,280],{"class":313},[303,398,333],{"class":309},[303,400,402,404,406,408,410,412,415,417,419,422,424,426],{"class":305,"line":401},5,[303,403,372],{"class":309},[303,405,280],{"class":313},[303,407,318],{"class":317},[303,409,321],{"class":309},[303,411,324],{"class":317},[303,413,414],{"class":327},"text-slate-700",[303,416,324],{"class":317},[303,418,388],{"class":309},[303,420,421],{"class":327},"Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aspernatur.",[303,423,394],{"class":309},[303,425,280],{"class":313},[303,427,333],{"class":309},[303,429,431,434,436],{"class":305,"line":430},6,[303,432,433],{"class":309},"    \u003C/",[303,435,353],{"class":313},[303,437,333],{"class":309},[303,439,441,443,445,447,449,451,454,456],{"class":305,"line":440},7,[303,442,350],{"class":309},[303,444,353],{"class":313},[303,446,318],{"class":317},[303,448,321],{"class":309},[303,450,324],{"class":317},[303,452,453],{"class":327},"sm:block w-1/2 sm:w-full font-normal text-left",[303,455,324],{"class":317},[303,457,333],{"class":309},[303,459,461,463,466,469,471,473,476,478,481,483,485,488,490],{"class":305,"line":460},8,[303,462,372],{"class":309},[303,464,465],{"class":313},"img",[303,467,468],{"class":317}," src",[303,470,321],{"class":309},[303,472,324],{"class":317},[303,474,475],{"class":327},"https://picsum.photos/600/600",[303,477,324],{"class":317},[303,479,480],{"class":317}," alt",[303,482,321],{"class":309},[303,484,324],{"class":317},[303,486,487],{"class":327},"Unsplash photo",[303,489,324],{"class":317},[303,491,333],{"class":309},[303,493,495,497,499],{"class":305,"line":494},9,[303,496,433],{"class":309},[303,498,353],{"class":313},[303,500,333],{"class":309},[303,502,504,507,509],{"class":305,"line":503},10,[303,505,506],{"class":309},"  \u003C/",[303,508,342],{"class":313},[303,510,333],{"class":309},[303,512,514,516,518],{"class":305,"line":513},11,[303,515,394],{"class":309},[303,517,314],{"class":313},[303,519,333],{"class":309},[280,521,522],{},"Naturally, the image will show under the text when viewed on a mobile device.",[280,524,525],{},"However, using table responsive display utilities, we can reverse the columns:",[292,527,530],{"className":294,"code":528,"filename":529,"language":297,"meta":298,"style":298},"\u003Ctable class=\"w-full\">\n  \u003Ctr>\n    \u003Cth class=\"w-1/2 sm:table-footer-group font-sans font-normal text-left\">\n      \u003Cdiv class=\"sm:w-full sm:px-8\">\n        \u003Ch2 class=\"text-2xl font-hairline text-black\">Left text\u003C/h2>\n        \u003Cp class=\"text-slate-700 m-0\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aspernatur.\u003C/p>\n      \u003C/div>\n    \u003C/th>\n    \u003Cth class=\"w-1/2 sm:table-header-group font-normal text-left\">\n      \u003Cdiv class=\"sm:w-full sm:px-8\">\n        \u003Cimg src=\"https://picsum.photos/600/600\" alt=\"Unsplash photo\">\n      \u003C/div>\n    \u003C/th>\n  \u003C/tr>\n\u003C/table>\n","2-col-reverse.html",[300,531,532,550,558,577,597,624,651,660,668,687,705,733,742,751,760],{"__ignoreMap":298},[303,533,534,536,538,540,542,544,546,548],{"class":305,"line":306},[303,535,310],{"class":309},[303,537,314],{"class":313},[303,539,318],{"class":317},[303,541,321],{"class":309},[303,543,324],{"class":317},[303,545,328],{"class":327},[303,547,324],{"class":317},[303,549,333],{"class":309},[303,551,552,554,556],{"class":305,"line":336},[303,553,339],{"class":309},[303,555,342],{"class":313},[303,557,333],{"class":309},[303,559,560,562,564,566,568,570,573,575],{"class":305,"line":347},[303,561,350],{"class":309},[303,563,353],{"class":313},[303,565,318],{"class":317},[303,567,321],{"class":309},[303,569,324],{"class":317},[303,571,572],{"class":327},"w-1/2 sm:table-footer-group font-sans font-normal text-left",[303,574,324],{"class":317},[303,576,333],{"class":309},[303,578,579,581,584,586,588,590,593,595],{"class":305,"line":369},[303,580,372],{"class":309},[303,582,583],{"class":313},"div",[303,585,318],{"class":317},[303,587,321],{"class":309},[303,589,324],{"class":317},[303,591,592],{"class":327},"sm:w-full sm:px-8",[303,594,324],{"class":317},[303,596,333],{"class":309},[303,598,599,602,604,606,608,610,612,614,616,618,620,622],{"class":305,"line":401},[303,600,601],{"class":309},"        \u003C",[303,603,284],{"class":313},[303,605,318],{"class":317},[303,607,321],{"class":309},[303,609,324],{"class":317},[303,611,383],{"class":327},[303,613,324],{"class":317},[303,615,388],{"class":309},[303,617,391],{"class":327},[303,619,394],{"class":309},[303,621,284],{"class":313},[303,623,333],{"class":309},[303,625,626,628,630,632,634,636,639,641,643,645,647,649],{"class":305,"line":430},[303,627,601],{"class":309},[303,629,280],{"class":313},[303,631,318],{"class":317},[303,633,321],{"class":309},[303,635,324],{"class":317},[303,637,638],{"class":327},"text-slate-700 m-0",[303,640,324],{"class":317},[303,642,388],{"class":309},[303,644,421],{"class":327},[303,646,394],{"class":309},[303,648,280],{"class":313},[303,650,333],{"class":309},[303,652,653,656,658],{"class":305,"line":440},[303,654,655],{"class":309},"      \u003C/",[303,657,583],{"class":313},[303,659,333],{"class":309},[303,661,662,664,666],{"class":305,"line":460},[303,663,433],{"class":309},[303,665,353],{"class":313},[303,667,333],{"class":309},[303,669,670,672,674,676,678,680,683,685],{"class":305,"line":494},[303,671,350],{"class":309},[303,673,353],{"class":313},[303,675,318],{"class":317},[303,677,321],{"class":309},[303,679,324],{"class":317},[303,681,682],{"class":327},"w-1/2 sm:table-header-group font-normal text-left",[303,684,324],{"class":317},[303,686,333],{"class":309},[303,688,689,691,693,695,697,699,701,703],{"class":305,"line":503},[303,690,372],{"class":309},[303,692,583],{"class":313},[303,694,318],{"class":317},[303,696,321],{"class":309},[303,698,324],{"class":317},[303,700,592],{"class":327},[303,702,324],{"class":317},[303,704,333],{"class":309},[303,706,707,709,711,713,715,717,719,721,723,725,727,729,731],{"class":305,"line":513},[303,708,601],{"class":309},[303,710,465],{"class":313},[303,712,468],{"class":317},[303,714,321],{"class":309},[303,716,324],{"class":317},[303,718,475],{"class":327},[303,720,324],{"class":317},[303,722,480],{"class":317},[303,724,321],{"class":309},[303,726,324],{"class":317},[303,728,487],{"class":327},[303,730,324],{"class":317},[303,732,333],{"class":309},[303,734,736,738,740],{"class":305,"line":735},12,[303,737,655],{"class":309},[303,739,583],{"class":313},[303,741,333],{"class":309},[303,743,745,747,749],{"class":305,"line":744},13,[303,746,433],{"class":309},[303,748,353],{"class":313},[303,750,333],{"class":309},[303,752,754,756,758],{"class":305,"line":753},14,[303,755,506],{"class":309},[303,757,342],{"class":313},[303,759,333],{"class":309},[303,761,763,765,767],{"class":305,"line":762},15,[303,764,394],{"class":309},[303,766,314],{"class":313},[303,768,333],{"class":309},[280,770,771],{},"It's done in 2 simple steps:",[773,774,775,783],"ol",{},[776,777,778,779,782],"li",{},"Use the responsive ",[300,780,781],{},"table-{...}-group"," utilities on each column, to reverse column order on small screens",[776,784,785,786,789],{},"Wrap the contents of each column in a ",[300,787,788],{},"\u003Cdiv>"," and use it to set padding for mobile. This is required because the CSS properties used to reverse the column order do not support padding",[280,791,792,793,800],{},"See the ",[794,795,799],"a",{"href":796,"rel":797},"https://codepen.io/maizzle/pen/dgpxbB?editors=1000",[798],"nofollow","2 col reorder demo on CodePen",".",[284,802,804],{"id":803},"reorder-3-cols","Reorder 3+ cols",[280,806,807],{},"In a similar fashion, we can reorder a 3+ column layout:",[292,809,812],{"className":294,"code":810,"filename":811,"language":297,"meta":298,"style":298},"\u003Ctable class=\"w-full\">\n  \u003Ctr class=\"sm:w-full sm:table\">\n    \u003Cth class=\"w-1/3 sm:table-footer-group\">\n      \u003Cdiv class=\"sm:px-2\">\n        \u003Ch2 class=\"text-xl font-hairline\">Last on mobile\u003C/h2>\n      \u003C/div>\n    \u003C/th>\n    \u003Cth class=\"w-1/3 sm:table-footer-group\">\n      \u003Cdiv class=\"sm:px-2\">\n        \u003Ch2 class=\"text-xl font-hairline\">Second on mobile\u003C/h2>\n      \u003C/div>\n    \u003C/th>\n    \u003Cth class=\"w-1/3 sm:table-caption sm:w-full\">\n      \u003Cdiv class=\"sm:px-2\">\n        \u003Ch2 class=\"text-xl font-hairline\">First on mobile\u003C/h2>\n      \u003C/div>\n    \u003C/th>\n  \u003C/tr>\n\u003C/table>\n","3-col-reverse.html",[300,813,814,832,851,870,889,917,925,933,951,969,996,1004,1012,1031,1049,1076,1085,1094,1103],{"__ignoreMap":298},[303,815,816,818,820,822,824,826,828,830],{"class":305,"line":306},[303,817,310],{"class":309},[303,819,314],{"class":313},[303,821,318],{"class":317},[303,823,321],{"class":309},[303,825,324],{"class":317},[303,827,328],{"class":327},[303,829,324],{"class":317},[303,831,333],{"class":309},[303,833,834,836,838,840,842,844,847,849],{"class":305,"line":336},[303,835,339],{"class":309},[303,837,342],{"class":313},[303,839,318],{"class":317},[303,841,321],{"class":309},[303,843,324],{"class":317},[303,845,846],{"class":327},"sm:w-full sm:table",[303,848,324],{"class":317},[303,850,333],{"class":309},[303,852,853,855,857,859,861,863,866,868],{"class":305,"line":347},[303,854,350],{"class":309},[303,856,353],{"class":313},[303,858,318],{"class":317},[303,860,321],{"class":309},[303,862,324],{"class":317},[303,864,865],{"class":327},"w-1/3 sm:table-footer-group",[303,867,324],{"class":317},[303,869,333],{"class":309},[303,871,872,874,876,878,880,882,885,887],{"class":305,"line":369},[303,873,372],{"class":309},[303,875,583],{"class":313},[303,877,318],{"class":317},[303,879,321],{"class":309},[303,881,324],{"class":317},[303,883,884],{"class":327},"sm:px-2",[303,886,324],{"class":317},[303,888,333],{"class":309},[303,890,891,893,895,897,899,901,904,906,908,911,913,915],{"class":305,"line":401},[303,892,601],{"class":309},[303,894,284],{"class":313},[303,896,318],{"class":317},[303,898,321],{"class":309},[303,900,324],{"class":317},[303,902,903],{"class":327},"text-xl font-hairline",[303,905,324],{"class":317},[303,907,388],{"class":309},[303,909,910],{"class":327},"Last on mobile",[303,912,394],{"class":309},[303,914,284],{"class":313},[303,916,333],{"class":309},[303,918,919,921,923],{"class":305,"line":430},[303,920,655],{"class":309},[303,922,583],{"class":313},[303,924,333],{"class":309},[303,926,927,929,931],{"class":305,"line":440},[303,928,433],{"class":309},[303,930,353],{"class":313},[303,932,333],{"class":309},[303,934,935,937,939,941,943,945,947,949],{"class":305,"line":460},[303,936,350],{"class":309},[303,938,353],{"class":313},[303,940,318],{"class":317},[303,942,321],{"class":309},[303,944,324],{"class":317},[303,946,865],{"class":327},[303,948,324],{"class":317},[303,950,333],{"class":309},[303,952,953,955,957,959,961,963,965,967],{"class":305,"line":494},[303,954,372],{"class":309},[303,956,583],{"class":313},[303,958,318],{"class":317},[303,960,321],{"class":309},[303,962,324],{"class":317},[303,964,884],{"class":327},[303,966,324],{"class":317},[303,968,333],{"class":309},[303,970,971,973,975,977,979,981,983,985,987,990,992,994],{"class":305,"line":503},[303,972,601],{"class":309},[303,974,284],{"class":313},[303,976,318],{"class":317},[303,978,321],{"class":309},[303,980,324],{"class":317},[303,982,903],{"class":327},[303,984,324],{"class":317},[303,986,388],{"class":309},[303,988,989],{"class":327},"Second on mobile",[303,991,394],{"class":309},[303,993,284],{"class":313},[303,995,333],{"class":309},[303,997,998,1000,1002],{"class":305,"line":513},[303,999,655],{"class":309},[303,1001,583],{"class":313},[303,1003,333],{"class":309},[303,1005,1006,1008,1010],{"class":305,"line":735},[303,1007,433],{"class":309},[303,1009,353],{"class":313},[303,1011,333],{"class":309},[303,1013,1014,1016,1018,1020,1022,1024,1027,1029],{"class":305,"line":744},[303,1015,350],{"class":309},[303,1017,353],{"class":313},[303,1019,318],{"class":317},[303,1021,321],{"class":309},[303,1023,324],{"class":317},[303,1025,1026],{"class":327},"w-1/3 sm:table-caption sm:w-full",[303,1028,324],{"class":317},[303,1030,333],{"class":309},[303,1032,1033,1035,1037,1039,1041,1043,1045,1047],{"class":305,"line":753},[303,1034,372],{"class":309},[303,1036,583],{"class":313},[303,1038,318],{"class":317},[303,1040,321],{"class":309},[303,1042,324],{"class":317},[303,1044,884],{"class":327},[303,1046,324],{"class":317},[303,1048,333],{"class":309},[303,1050,1051,1053,1055,1057,1059,1061,1063,1065,1067,1070,1072,1074],{"class":305,"line":762},[303,1052,601],{"class":309},[303,1054,284],{"class":313},[303,1056,318],{"class":317},[303,1058,321],{"class":309},[303,1060,324],{"class":317},[303,1062,903],{"class":327},[303,1064,324],{"class":317},[303,1066,388],{"class":309},[303,1068,1069],{"class":327},"First on mobile",[303,1071,394],{"class":309},[303,1073,284],{"class":313},[303,1075,333],{"class":309},[303,1077,1079,1081,1083],{"class":305,"line":1078},16,[303,1080,655],{"class":309},[303,1082,583],{"class":313},[303,1084,333],{"class":309},[303,1086,1088,1090,1092],{"class":305,"line":1087},17,[303,1089,433],{"class":309},[303,1091,353],{"class":313},[303,1093,333],{"class":309},[303,1095,1097,1099,1101],{"class":305,"line":1096},18,[303,1098,506],{"class":309},[303,1100,342],{"class":313},[303,1102,333],{"class":309},[303,1104,1106,1108,1110],{"class":305,"line":1105},19,[303,1107,394],{"class":309},[303,1109,314],{"class":313},[303,1111,333],{"class":309},[280,1113,1114],{},"This only needed a couple of extra steps:",[1116,1117,1118,1132],"ul",{},[776,1119,1120,1121,1124,1125,1128,1129],{},"Make the ",[300,1122,1123],{},"\u003Ctr>"," full width on mobile, by adding ",[300,1126,1127],{},"sm:w-full"," and ",[300,1130,1131],{},"sm:table",[776,1133,1134,1135,1128,1138,1140],{},"Use ",[300,1136,1137],{},"sm:table-caption",[300,1139,1127],{}," on the column that you want to display first on mobile",[280,1142,792,1143,800],{},[794,1144,1147],{"href":1145,"rel":1146},"https://codepen.io/maizzle/pen/dgpxLp?editors=1000",[798],"3+ col reorder demo on CodePen",[1149,1150,1151],"style",{},"html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":298,"searchDepth":336,"depth":336,"links":1153},[1154,1155],{"id":286,"depth":336,"text":287},{"id":803,"depth":336,"text":804},"Reorder stacked columns in a mobile responsive HTML email template with table layout CSS properties.","md",{},true,{"title":192,"description":1156},{"loc":193},"docs/examples/reverse-stack","kfBZxGMaQBl3kQ7yj100ORar0_qQf13-JDQOzQiOIF8",{"id":4,"extension":5,"items":1165,"meta":1236,"stem":195,"__hash__":196},[1166,1176,1181,1190,1203,1221,1227],{"name":8,"items":1167},[1168,1169,1170,1171,1172,1173,1174,1175],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":1177},[1178,1179,1180],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":1182},[1183,1184,1185,1186,1187,1188,1189],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":1191},[1192,1193,1194,1195,1196,1197,1198,1199,1200,1201,1202],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":1204},[1205,1206,1207,1208,1209,1210,1211,1212,1213,1214,1215,1216,1217,1218,1219,1220],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":1222},[1223,1224,1225,1226],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":1228},[1229,1230,1231,1232,1233,1234,1235],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318593486]