Jump to content
aswiseman

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%">
      <p>Text</p> 
     </div>
      <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">
    </div>
  </div>

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×