Xtreme offers many Featured Image layout options for posts, including the ability to hide them on selected devices.
But the Layout you choose will the same on all devices.

When using layouts like “Beside page/Post” and Right/Left align, the text sits besides the Featured Image.
On narrow devices like phones, you can end up with a narrow column of content besides the Featured Image.
In that case, you may want to have the text drop below the image on phones, and eventually have the image centered and full width.

The Tutorial below will review some of these cases, and ways to workaround the problem.
 

FI “Beside page/Post” & Right or Left Aligned

In that mode the whole text sits besides the Featured Image (no Wrap), That can look strange on a phone, when there is not much width for both the image and the text to sit side by side.
 
To make the Featured Image Sit on top of the text on mobile devices, do the following.
 
Set your featured image the way you want it on desktop (Beside Page/Post & aligned Left or Right)
 
Then use the rules below to move the text below the Featured Image on Phones and be centered.

.is-phone .featured-image {float:none;display:block;margin:0.33em auto 2% auto;}

 
Note:

• If you do not want the image centered, remove the margin property
• If you want this to also apply to small tablets, replace .is-phone by .is-mobile
• If you need to only apply to a specific page add a page id class attached to the mobile class like
  .is-phone.page-id-xxxx

 

FI “With Content Top” & Right or Left Aligned

When using “With Content Top” the text wraps around the Featured Image, but here also you can end up with a narrow columns of txt on the side of the Featured Image.
To change the layout on Mobile, here is a slightly different method that also allows you to adjust the Featured Image size:
 
In the Posts Featured image options, set the Featured Image to be the way it should be on phones, which is centered and whatever size you want (like full)
Then Add rules like below to align the Featured Image Left or right with wrapped text on other devices (like desktop and eventually small tablets)

• The first selector determines which device size the rule applies to
  .is-desktop targets devices wider that 768px
  .is-smalltablet targets devices that are between 580px and 768px wide
• Only use the rules you need
• Use left or right depending what you want (note margin should be set on the opposite side)
• Use a max-width value if you wish to reduce the size of the featured image

/* FI aligned left on desktop */
.is-desktop .featured-image {float:left;margin-right:20px;max-width:300px;}

/* FI aligned right on desktop */
.is-desktop .featured-image {float:right; margin-left:20px;max-width:300px;}

/* FI aligned Left on Small Tablet with a smaller size */
.is-smalltablet .featured-image {float:left;margin-right:20px;max-width:200px;}

 
Note:
If you need to restrict the rules to a specific page, add a Page class with the page ID number (XXXX) attached to the device class like
.is-desktop.page-id-xxxx
 

Make any Right/Left floated image be cleared on mobile

If you want to extrapolate that behavior to other floated images (wrapped text) inside regular content, you can do the following:
 
Give all images for which you want the behavior, a common class. To do that, you would switch your editor to text mode then, in the <img> tag, if it already has a class attribute , just add the class   my-img-clear to the classes already in the class attribute, separated by a space.
For example if you has an image tag that says
<img  class="class1 class2"...../>
Make it
<img class="my-img-clear class1 class2"..../>
 
If you are using caption, the class needs to be added to the caption shortcode, it will look like
[caption ... class="my-img-clear"]<img class="class1 class2"..../>
 
Do that for every image that needs the change in layout on mobile.
 
Then add the rule below to the Global Custom CSS Rule Box to define the change in layout on Phone.

.is-phone img.my-img-clear {
display:block !important;
float:none !important;
margin-left:auto !important;
margin-right:auto !important;
}