Title: Media & text block
Last modified: July 13, 2020

---

# Media & text block

 *  Resolved [jeanaesch](https://wordpress.org/support/users/jeanaesch/)
 * (@jeanaesch)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/media-text-block-3/)
 * Hi all
    I placed multiple images and corresponding text by using the media & 
   text block. The images are displayed alternately on the left and on the right
   side. This looks very good on desktop and tablet screens, but not on small screens
   like mobile phones where the text is shown in one column alternately below or
   above the image. The “stack on mobile” option is enabled. I am looking for an
   advice for the above scenario in order to display the text on small screens always
   above the images. Best regards Jean

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

 *  [James Hunt](https://wordpress.org/support/users/bonkerz/)
 * (@bonkerz)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/media-text-block-3/#post-13121405)
 * I think in this situation you would need some custom CSS to help you achieve 
   the layout you want. If you can share the page you are working on, someone may
   be able to give you the CSS to add to your theme.
 *  Thread Starter [jeanaesch](https://wordpress.org/support/users/jeanaesch/)
 * (@jeanaesch)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/media-text-block-3/#post-13122927)
 * Hi James
 * Thanks. The url of the mentioned page is [http://jac.areinigung.ch/test-jean-eins/](http://jac.areinigung.ch/test-jean-eins/)(
   language is german). I would like to have the text blocks always above the image
   for the one column mobile display.
 * Best regards
    Jean
 *  [James Hunt](https://wordpress.org/support/users/bonkerz/)
 * (@bonkerz)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/media-text-block-3/#post-13123812)
 * Hi Jean
 * You need to add this to your themes CSS somewhere (try adding Custom CSS via 
   Customizer or Edit Theme > style.css)
 *     ```
       @media (max-width: 600px) {
       .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile figure.wp-block-media-text__media {
       grid-row: 1
       }
       .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile div.wp-block-media-text__content {
       grid-row: 2
       }
       }
       ```
   
 * This puts the image on top for the Media & Text Block, when Media is on Right
   and Is Stacked on Mobile is selected.
 *  Thread Starter [jeanaesch](https://wordpress.org/support/users/jeanaesch/)
 * (@jeanaesch)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/media-text-block-3/#post-13125194)
 * Hi James
 * Many thanks. I works how you described it. However, can you modify your CSS in
   order to put the text on top of the Media & Text Block.
 * Best regards
    Jean
 *  [James Hunt](https://wordpress.org/support/users/bonkerz/)
 * (@bonkerz)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/media-text-block-3/#post-13131052)
 * Oops sorry, haha I had it in my mind that you wanted the image first.
 * Try this:
 *     ```
       @media (max-width: 600px) {
       .wp-block-media-text.is-stacked-on-mobile:not(.has-media-on-the-right) figure.wp-block-media-text__media {
       grid-row: 2;
       }
   
       .wp-block-media-text.is-stacked-on-mobile:not(.has-media-on-the-right) div.wp-block-media-text__content {
       grid-row: 1;
       }
       }
       ```
   
 * This puts the TEXT on top for the Media & Text Block, when Stacked on Mobile 
   is selected (but not when Media is on Right).
 * Hope that helps
    -  This reply was modified 5 years, 10 months ago by [James Hunt](https://wordpress.org/support/users/bonkerz/).
    -  This reply was modified 5 years, 10 months ago by [James Hunt](https://wordpress.org/support/users/bonkerz/).
 *  Thread Starter [jeanaesch](https://wordpress.org/support/users/jeanaesch/)
 * (@jeanaesch)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/media-text-block-3/#post-13136794)
 * Hi James
 * Just perfect. Many thanks.
    Best regards from Switzreland
 * Jean

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

The topic ‘Media & text block’ is closed to new replies.

 * ![](https://ps.w.org/gutenberg/assets/icon-256x256.jpg?rev=1776042)
 * [Gutenberg](https://wordpress.org/plugins/gutenberg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gutenberg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gutenberg/)
 * [Active Topics](https://wordpress.org/support/plugin/gutenberg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gutenberg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gutenberg/reviews/)

## Tags

 * [Media & Text block](https://wordpress.org/support/topic-tag/media-text-block/)

 * 6 replies
 * 2 participants
 * Last reply from: [jeanaesch](https://wordpress.org/support/users/jeanaesch/)
 * Last activity: [5 years, 10 months ago](https://wordpress.org/support/topic/media-text-block-3/#post-13136794)
 * Status: resolved