Jump to content

w3-cell-row / w3-cell - help with column ordering

Recommended Posts

I have been playing around with layouts and have used w3-cell-row / w3-cell.

I have two columns, with text on the left and an image on the right.

Sometimes, though, I want the image on the left and the text on the right, BUT for single-column display on mobiles, I want the text to still come first, above the image.

So I tried this... the text comes first in the code, but I apply w3-right to its containing div and w3-left to the div of the image, so that on wider screens the text is on the right and the image is on the left...

  <div class="w3-cell-row" >
    <div class="w3-container w3-cell w3-mobile w3-purple w3-right" style="width: 60%">
      <div class="w3-container w3-cell w3-mobile w3-green w3-left w3-center w3-grey w3-cell-middle" style="width: 40%;">
      <img class="w3-image" src="https://dummyimage.com/320x180/000/fff"
        width="320" height="180">

This works after a fashion, but I lose the cells being the same height.

Is there an official / neater / cleverer way of achieving what I want?


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...