{"id":223058,"date":"2026-07-23T11:24:42","date_gmt":"2026-07-23T16:24:42","guid":{"rendered":"https:\/\/spritz.dev\/divi\/?page_id=223058"},"modified":"2026-07-23T14:35:43","modified_gmt":"2026-07-23T19:35:43","slug":"flexbox-reordering","status":"publish","type":"page","link":"https:\/\/spritz.dev\/divi\/flexbox-reordering\/","title":{"rendered":"Flexbox Reordering"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_0 et_pb_row et_flex_row et_flex_column_24_24_tablet et_flex_column_24_24_phone et_flex_column_24_24_phoneWide\">\n<div class=\"et_pb_column_0 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone et_flex_column_24_24_phoneWide et_flex_column_8_24_tabletWide et_flex_column_8_24_widescreen et_flex_column_8_24_ultraWide\">\n<div class=\"et_pb_image_0 et_pb_image et_pb_image_sticky_tablet et_pb_module et_flex_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/spritz.dev\/divi\/wp-content\/uploads\/2026\/07\/time-management.png\" alt=\"Time Management\" title=\"time-management\" width=\"512\" height=\"512\" srcset=\"https:\/\/spritz.dev\/divi\/wp-content\/uploads\/2026\/07\/time-management.png 512w, https:\/\/spritz.dev\/divi\/wp-content\/uploads\/2026\/07\/time-management-480x480.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 512px, 100vw\" class=\"wp-image-223060\" \/><\/span><\/div>\n<\/div>\n\n<div class=\"et_pb_column_1 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone et_flex_column_24_24_phoneWide et_flex_column_8_24_tabletWide et_flex_column_8_24_widescreen et_flex_column_8_24_ultraWide\">\n<div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--module--divi-text--default\"><div class=\"et_pb_text_inner\"><h2>Mobile Optimization<\/h2>\n<p style=\"margin: 0in; font-family: Calibri; font-size: 13.0pt;\">On Desktop, the columns sit side by side. On Tablet, the CTA moves higher. On Phone, choose the order that best supports the content hierarchy.\u00a0 For conversion-focused sections, users should see the primary action early.\u00a0<\/p>\n<\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_2 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone et_flex_column_24_24_phoneWide et_flex_column_8_24_tabletWide et_flex_column_8_24_widescreen et_flex_column_8_24_ultraWide\">\n<div class=\"et_pb_group_0 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_0_wrapper preset--group--divi-button--divi-button--h1c8vfa--ofvcu0vkrk_wrapper\"><a class=\"et_pb_button_0 et_pb_button et_pb_bg_layout_light et_pb_module et_flex_module preset--group--divi-button--divi-button--h1c8vfa--ofvcu0vkrk\" href=\"\">Click Here<\/a><\/div>\n\n<div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--module--divi-text--default\"><div class=\"et_pb_text_inner\" data-et-mv-hidden-tablet=\"true\"><p>Edit or remove this text inline or in the modules.\u00a0<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_1 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_1 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_3 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone et_flex_column_24_24_phoneWide et_flex_column_24_24_tabletWide et_flex_column_24_24_widescreen et_flex_column_24_24_ultraWide\">\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_1_wrapper\"><a class=\"et_pb_button_1 et_pb_button et_pb_bg_layout_light et_pb_module et_flex_module\" href=\"\">Section 6 - STEP-BY-STEP TUTORIAL<\/a><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_2 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_4 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_18_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone et_flex_column_24_24_phoneWide et_flex_column_18_24_tabletWide et_flex_column_18_24_widescreen et_flex_column_18_24_ultraWide\">\n<div class=\"et_pb_heading_0 et_pb_heading et_pb_module et_flex_module preset--module--divi-heading--default\"><div class=\"et_pb_heading_container\"><h1 class=\"et_pb_module_header\">How to set Display Order per breakpoint in Divi 5<\/h1><\/div><\/div>\n\n<div class=\"et_pb_text_2 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--module--divi-text--default\"><div class=\"et_pb_text_inner\"><p>Follow along with this three-column layout \u2014 a Feature Image, a Text Block, and a CTA Panel. On desktop they sit side by side. On tablet the CTA moves above everything. On phone the image rises to the top. Each step shows you exactly what to click in Divi 5.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_3 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_5 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone et_flex_column_24_24_phoneWide et_flex_column_8_24_tabletWide et_flex_column_8_24_widescreen et_flex_column_8_24_ultraWide\">\n<div class=\"et_pb_image_1 et_pb_image et_pb_module et_flex_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/spritz.dev\/divi\/wp-content\/uploads\/2026\/07\/p4-1.png\" title=\"p4-1\" width=\"800\" height=\"800\" class=\"wp-image-223125\" \/><\/span><\/div>\n<\/div>\n\n<div class=\"et_pb_column_6 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone et_flex_column_24_24_phoneWide et_flex_column_8_24_tabletWide et_flex_column_8_24_widescreen et_flex_column_8_24_ultraWide\">\n<div class=\"et_pb_heading_1 et_pb_heading et_pb_module et_flex_module preset--module--divi-heading--default\"><div class=\"et_pb_heading_container\"><h3 class=\"et_pb_module_header\">Mobile Optimization<\/h3><\/div>\n<div class=\"et_pb_text_3 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--module--divi-text--default\"><div class=\"et_pb_text_inner\"><p>By adopting a mobile-first design approach, you not only cater to your audience's preferences but also improve your search engine rankings, making your content accessible to a wider audience. Focus on mobile optimization to create a welcoming and user-friendly experience that resonates with today's mobile consumers.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_column_7 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone et_flex_column_24_24_phoneWide et_flex_column_8_24_tabletWide et_flex_column_8_24_widescreen et_flex_column_8_24_ultraWide\">\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_2_wrapper\"><a class=\"et_pb_button_2 et_pb_button et_pb_bg_layout_light et_pb_module et_flex_module\" href=\"\">Get Started Today<\/a><\/div>\n\n<div class=\"et_pb_text_4 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--module--divi-text--default\"><div class=\"et_pb_text_inner\"><p>Join thousands building websites they love.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"wf_page_folders":[9],"class_list":["post-223058","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spritz.dev\/divi\/wp-json\/wp\/v2\/pages\/223058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spritz.dev\/divi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spritz.dev\/divi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spritz.dev\/divi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spritz.dev\/divi\/wp-json\/wp\/v2\/comments?post=223058"}],"version-history":[{"count":11,"href":"https:\/\/spritz.dev\/divi\/wp-json\/wp\/v2\/pages\/223058\/revisions"}],"predecessor-version":[{"id":223151,"href":"https:\/\/spritz.dev\/divi\/wp-json\/wp\/v2\/pages\/223058\/revisions\/223151"}],"wp:attachment":[{"href":"https:\/\/spritz.dev\/divi\/wp-json\/wp\/v2\/media?parent=223058"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/spritz.dev\/divi\/wp-json\/wp\/v2\/wf_page_folders?post=223058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}