Title: Responsive
Last modified: November 21, 2023

---

# Responsive

 *  Resolved [Jul](https://wordpress.org/support/users/yb5586164/)
 * (@yb5586164)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/responsive-447/)
 * [Mobile](https://snipboard.io/S2A6L1.jpg)
 * [Desktop](https://snipboard.io/aA5L0t.jpg)
 * How can i change that on mobile it should be text image text image and not text
   image image text…?
    -  This topic was modified 2 years, 6 months ago by [Jul](https://wordpress.org/support/users/yb5586164/).

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Moderator [jordesign](https://wordpress.org/support/users/jordesign/)
 * (@jordesign)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/responsive-447/#post-17225747)
 * Hey [@yb5586164](https://wordpress.org/support/users/yb5586164/) – swapping the
   order around like that is something that likely needs some CSS code to do so.
   Could you please share a link to the actual page and I can take a closer look?
 *  [sunza](https://wordpress.org/support/users/sunza/)
 * (@sunza)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/responsive-447/#post-17233785)
 * It’s for the theme default home page template available in the site editor. [https://share.icloud.com/photos/091YOkG0PRaQSXDdI6_RvgCGg](https://share.icloud.com/photos/091YOkG0PRaQSXDdI6_RvgCGg)
   Could you provide the CSS code for that, please ?
 *  Moderator [jordesign](https://wordpress.org/support/users/jordesign/)
 * (@jordesign)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/responsive-447/#post-17234350)
 * Hey [@sunza](https://wordpress.org/support/users/sunza/) – the first step would
   be to add a CSS class to the columns that you want to appear first. In this particular
   instance you’d want to add the CSS class to the second column which has the text
   in it.
 * [https://wordpress.org/documentation/article/columns-block/#advanced](https://wordpress.org/documentation/article/columns-block/#advanced)
 * If you can do that – and then share a link to the page – I can help with some
   CSS code to specifically target that column
 *  [sunza](https://wordpress.org/support/users/sunza/)
 * (@sunza)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/responsive-447/#post-17240339)
 * Thanks in advance ! This is the link to a temporary site home page for testing
   purposes : [https://offertrip.s3-tastewp.com](https://offertrip.s3-tastewp.com)
 *  [Kavya Gokul (a11n)](https://wordpress.org/support/users/properlypurple/)
 * (@properlypurple)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/responsive-447/#post-17241585)
 * Hey [@sunza](https://wordpress.org/support/users/sunza/)!
 * You can first assign a custom class to any columns like this, that you want to
   reverse on mobile (see screenshot below)
 * ![](https://supportmediatech.files.wordpress.com/2023/11/image-7.png)
 * Once you have the style in place, you can add some [global additional css](https://wordpress.org/documentation/article/styles-overview/#applying-custom-css)
   like this:
 *     ```wp-block-code
       @media( max-width:782px ) {
         .wp-block-columns.reverse-on-mobile {
           flex-direction: column-reverse
         }
       }
       ```
   
 * Just to add here, there are open pull requests for the columns and media+text
   block to support use-case like this, so this should not require any css changes
   in the future.
    - [https://github.com/WordPress/gutenberg/pull/55763](https://github.com/WordPress/gutenberg/pull/55763)
    - [https://github.com/WordPress/gutenberg/pull/56279](https://github.com/WordPress/gutenberg/pull/56279)
 *  -  This reply was modified 2 years, 6 months ago by [Kavya Gokul (a11n)](https://wordpress.org/support/users/properlypurple/).
      Reason: Added information about PRs on Github
 *  [sunza](https://wordpress.org/support/users/sunza/)
 * (@sunza)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/responsive-447/#post-17242188)
 * Thanks [@properlypurple](https://wordpress.org/support/users/properlypurple/),
   it’s working now after I followed the steps you explained.
 *  Thread Starter [Jul](https://wordpress.org/support/users/yb5586164/)
 * (@yb5586164)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/responsive-447/#post-17243125)
 * It didn’t work for me… what did i miss / mess ?
 *  Moderator [jordesign](https://wordpress.org/support/users/jordesign/)
 * (@jordesign)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/responsive-447/#post-17243542)
 * > It didn’t work for me… what did i miss / mess ?
 * [@yb5586164](https://wordpress.org/support/users/yb5586164/) without seeing the
   actual site you’re working on it is tricky to tell – are you able to share a 
   URL?
 * The main thing to double check would be:
    - Did you add a class to the column block (as in the screenshot)
    - Did you add the CSS code correctly

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Responsive’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentytwentyfour/1.5/screenshot.
   png)
 * Twenty Twenty-Four
 * [Support Threads](https://wordpress.org/support/theme/twentytwentyfour/)
 * [Active Topics](https://wordpress.org/support/theme/twentytwentyfour/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentytwentyfour/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentytwentyfour/reviews/)

 * 8 replies
 * 4 participants
 * Last reply from: [jordesign](https://wordpress.org/support/users/jordesign/)
 * Last activity: [2 years, 6 months ago](https://wordpress.org/support/topic/responsive-447/#post-17243542)
 * Status: resolved